Jump to content

Archived

This topic is now archived and is closed to further replies.

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

  • Similar Content

    • Kedark
      By Kedark+
      Hello,
      I apologize for the trivial question, but I can not deal with it. How do I turn off the display of a distinctive image on the page? (I have to add it because I use plugins that use it), but as I display the page, I do not want it to be visible (and appears above the subject.).
      Probably a cliché but I can not deal with it. Therefore, a request for help.
      Regards
      RKA
    • mtaus
      By mtaus+
      I have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • 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?

×