Mobile Image Sizing

  • Unknown's avatar
    themonarchistsodu · Member ·

    On our Podcasts page, I have the show blocks set to stack on mobile, but the logo for each one then becomes huge. The only way to make it smaller is to increase the padding, but then that also applies to the text below it (on mobile), which looks bad. Is there a way to set the padding for the image just for the mobile display? I tired a mobile version plugin, but it didn’t help.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    helper-heroponriki · Member ·

    Hi there!

    Thanks for getting in touch. While we’re not able to provide specific design guidance, we can give you suggestions to get started.

    From what you mentioned, you will want to set specific mobile-only CSS to adjust those images to show the way you want on mobile devices without changing the desktop version. To adjust the padding for the image only on mobile display, you can use CSS media queries to target specific screen sizes. Here’s a general example of what the CSS code might look like:

    /* CSS for adjusting image padding on mobile */
@media screen and (max-width: 767px) {
  /* Adjust the padding for the image */
  .your-image-class {
    padding: 10px; /* Adjust this value as needed */
  }

  /* Optionally, you can adjust other properties of the image on mobile */
  .your-image-class img {
    max-width: 100%; /* Ensures the image doesn't exceed its container */
    height: auto; /* Maintains aspect ratio */
  }
}

    Replace .your-image-class with the appropriate CSS class or ID that targets the logo images specifically on your Podcasts page. You can usually find this class or ID by inspecting the logo element using your browser’s developer tools.

    Make sure to adjust the padding value (10px in the example) to your desired size. This code will only apply the padding to the logo images when the screen width is 767 pixels or less, which typically corresponds to mobile devices.

    Add this CSS code to your WordPress site by going to Appearance > Customize > Additional CSS, then paste the code there and publish your changes. This should help you adjust the padding for the logo images only on mobile devices without affecting other elements.

    I hope that information helps you get started! If you have any further questions or need additional assistance, please feel free to ask.

  • The topic ‘Mobile Image Sizing’ is closed to new replies.