I'm not sure what changed, but some recent changes

I’m not sure what changed, but some recent changes to the CSS on my theme, is limiting the profile image size on a few of my pages using a mobile device. It appears I need some help getting the CSS to make the image larger, as it’s extremely small at the moment.

http://cityofhanahan.com/government/administration/

You can see visiting from a mobile device, the layout is fine, but the profile images are extremely small. Help!?

  • Vinod Dalvi
    • WP Unicorn

    Hi David,

    I hope you are well today and thank you for your question.

    I can see the profile images are displaying smaller on mobile devices due to CSS defined on your site.

    To display the profile images larger on mobile devices try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    http://wordpress.org/plugins/simple-custom-css

    @media only screen and (max-width: 540px){
    html #page .cmsms_profile.vertical .format-profile .pl_img {
    width: 90% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    float:none !important;
    }
    }

    Best Regards,

    Vinod Dalvi

  • David
    • The Crimson Coder

    Vinod,

    Thanks for the help. That def did a better job than before. However, I believe the display is still a little messed up. The image did get larger, but it’s still much smaller or just not in the correct place for the phone view. I turned my phone in landscape mode and the images went small again, but back in the spot that makes them look more familiar.

    Thanks again for the help!

  • David
    • The Crimson Coder

    See attached. These are all different "sections" in the same /administration page of the website.

    The "images" or Profile picture needs to look better represented on the mobile version. Desktop doesn't look bad, but mobile they get awfully small and have a lot of padding.

    Thanks,

    David

  • calvinrogercanas
    • New Recruit

    Hello David,

    Hope you’re well!

    Could you add this to your current theme’s style.css

    @media only screen and (max-width: 540px) and (min-width: 480px) {

    html #page .cmsms_profile.vertical .format-profile .pl_img {
    width: 50%;
    }

    }

    If that fix not solve your issue I am happy to assist you. :slight_smile: I just need you to grant support access from the dashboard plugin in order for me to take a closer look. See https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best Regards,

    Calvin

  • Vinod Dalvi
    • WP Unicorn

    Hi David,

    I checked your site and found you have used my provided CSS by making changes in it as following.

    @media only screen and (max-device-width: 480px){
    html #page .cmsms_profile.vertical .format-profile .pl_img {
    width: 90% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    float:none !important;
    }
    }

    Could you please tell me why you have made the changes in the provided CSS code?

    I can see because of changing width from 540px to 480px in the CSS code the image is displaying smaller for devices having width larger then 480px.

    Please advise.

    Regards,

    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.