Mobile Image Resizing

  • I have been struggling with figuring this one out for awhile. My website currently uses the virtue shortcode for columns four across on both fullwidth pages and blog style pages with sidebar.

    On fullwidth pages I am using 200px square images while 150px square seems to be the best image size that works with sidebar pages. I am satisfied with how my images look on desktop but not on mobile.

    Everything else is responsive and fits to each edge while the images stay at 200px and 150px and are too small to see very well. They are also no longer four across but one across in a long vertical line.

    I do realize that my specified width and height values are causing this and I have experimented with using auto and 100% values. This fixes the images on mobile but wrecks them on desktop.

    I thought there might be a combination of values that preserves how my images look on desktop while also resizing them to fit the screen on mobile but now I am not so sure. This was while editing the css for each image. Shouldn’t auto or 100% fit to each column width?

    Now I am wondering if there is some kind of code I can add to advanced settings inside theme options that overrides the width and height all at once for mobile ONLY to be auto or 100%. Awhile back I received a code here that resizes the header logo text for mobile only so something like this does not seem completely impossible.

    It would be really great if I could have some help with this!

Viewing 16 replies (of 16 total)
  • Thread Starter LilahLee

    (@lilahlee)

    Okay so usually the way of things – the code worked after I posted it did not. The margins are greatly improved but not perfect. On three across there is a slight gap horizontally that I want the same as the vertical margins – while four across is the opposite. Horizontal margin is good while vertical still has a larger gap than I would like to see. The same as the top to bottom margin would be nice. Since value changes are taking effect now I have no doubt I will figure this out.

    I am very grateful for the help!

Viewing 16 replies (of 16 total)
  • The topic ‘Mobile Image Resizing’ is closed to new replies.