trying to get resize of images to fit mobile

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 4 years, 2 months ago.

Author Posts

garyclouis

demos on fluid images do not follow what shows up. canvas WooThemes theme


Sebastian

Hey,

Would you mind sending me a link to the page you’re working on so I can troubleshoot. And provide some directions on exactly which image you’re trying to adjust for mobile with Microthemer?

Thanks!
Sebastian


garyclouis

Image at top of page – header

Woo Themes Canvas theme

Microthemer Version 5.2.3.4

Need anything else??


garyclouis

https://aprillouis.com/

need logon?


Sebastian

Thanks, no need for login with this issue. I can see how you need to style the image just by visiting the link you posted.

The header image is a background image, applied to the #header div element. And so its fluidity needs to be set via the background-size property on the Background property group. Your theme already sets the background-size to cover on mobile devices, which is what you want. But the padding-bottom of 280px is a bit too much on mobile. Setting it to around 90px should reveal more of the image.

I see you have already created a custom selector in Microthemer. If you click its name in the top toolbar you can change the selector to #header. And then set the bottom padding to 90px via the Phone tab. You can remove the other styles you added.

Or, you can delete your current selector and create a new one in targeting mode by clicking on the header image.

Does that make sense?

Cheers,
Sebastian

You must login or register to reply to this topic.