Jump to content
Claude203

Convert/target all images

Recommended Posts

Claude203

Hi,

Is there a way to target all images in a WordPress DMS site at once, in order to make them width=100% on mobile portrait mode? In other words, I am having trouble identifying the element for all image classes.

http://www.blackfives.org

Thanks,

Claude


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon

There are a lot of images, can you give an example?

Share this post


Link to post
Share on other sites
Claude203

Sure, thanks.

http://www.blackfives.org/archives-logo/

In this post, I would want the image to take up 100% width in mobile portrait. In other words, any image in the body of a blog post. I will try to fix page images at a later time. 

Thank you!
 


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon

Ok try some css like this: 

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
	.wp-caption {
    	/* Force the box to be 100% */
    	width: 100% !important;
  	}
}

 

Share this post


Link to post
Share on other sites
Claude203

That doesn't seem to work. 


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon
46 minutes ago, Claude203 said:

That doesn't seem to work. 

Where did you add the css? I dont see it.

Share this post


Link to post
Share on other sites
Claude203

It is in the theme>style.less

So it looks like this:

@media only screen and (max-width: 700px) {

.wp-caption {
width: 100% !important;
margin-left: auto;
margin-right: auto;
}

I also tried variations (mad-device-width) and 320px.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon
14 minutes ago, Claude203 said:

It is in the theme>style.less

So it looks like this:


@media only screen and (max-width: 700px) {

.wp-caption {
width: 100% !important;
margin-left: auto;
margin-right: auto;
}

I also tried variations (mad-device-width) and 320px.

That'll be why I cant see it then.

That only works with child themes.

Go to the extend page in the Platform 5 menu and search for the custom css/less plugin, install activate and add your css.

Share this post


Link to post
Share on other sites
Claude203

I don't have Platform 5, only DMS2. Will I still be able to do that in DMS2? 

Should I just add all of the CSS back into the DMS Less Fallback area? Or just that snippet?


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon

Could have sworn you had it activated earlier, must have been another site.

Yes add it to the css textarea,

Share this post


Link to post
Share on other sites
Claude203

That seems to work, at least in that original post I shared as an example! 

Is wp-caption for all caption classes? In other words, supposed to work for pages too, correct?


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Claude203

Asking it another way, is it possible to do this to standalone images that are not in caption tags?


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Simon

You'll have to change/add to the css with different selectors for other images.

Would help more with an exaaple.

Share this post


Link to post
Share on other sites
Simon

you could probably use entry_content img to target that image.

Share this post


Link to post
Share on other sites
Claude203

Do you mean something like this?

.entry_content .img {
width: 100% !important;
margin-left: auto;
margin-right: auto;
}


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • mtaus
      By mtaus+
      I'm trying to add a Careers page to a site to display job openings. The plan is to create a Post using a subcategory 'Careers' and then display those on the page. All of the post sections in PL seem to include images and there's no obvious way to remove them or include an excerpt from the post. 
      Any suggestions?
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
×