Some images not shrinking when viewed on mobile phones. (7 posts)

  1. cheebahawk
    Posted 3 years ago #

    Hi all,

    I've spend the past few days googling this issue and with no avail. I've decided to see if anyone on here has seen this, and/or has a fix for me. It is driving me nuts.

    So I have a site I created using the Simple Grid Theme
    The page can be seen here:

    Everything worked out great for the site design, albeit one issue. When I look at the site on a mobile device (tested on iPhone) everything on the site shrinks down correctly, minus the 3 icons on the bottom of the main page.

    I have tried multiple Mobile plugins and packages and even tried changing image types from .png to .jpg as well as creating 2 smaller images and uploaded them to my images folder (at 50% and 75% of the original size)I also tried the WP-Resolutions plugin, but that bricked my site into a 500 Internal Server Error.

    I am so stuck and if anyone out there can help, I will be so grateful. We can't seem to see what is the issue.

    Thanks in advance.

  2. Triptripper
    TutsKid Ninja
    Posted 3 years ago #

    I'm not an expert with css but maybe it's because of the fixed width sets in inline styles. I think you need to remove inline styles or put !important declaration in your mobile styles.

  3. cheebahawk
    Posted 3 years ago #


    Thanks for the reply. Do you mean the fixed width of my divs? or of the actual images. Because I never define the images with a height and width inline style, I just make the images the correct size.

    Anyone else ever run across this issue?

  4. Triptripper
    TutsKid Ninja
    Posted 3 years ago #

    I've seen this in your HTML source code

    <div style="width: 1000px; background: #dfdfdf;">
    <div style="width: 290px; float: left;">
    <div style="width: 290px; float: left;"><img alt="" src="http://www.comedybythegraham.com/wp-content/uploads/2013/03/brown_squear_podcast.png" /><span style="color: #eeeeee; font-size: 14px;"> In the Press </span></p>
    <div style="width: 290px; float: left;"><span style="color: #999999;">“Graham Kay, a definite act to watch, has mastered the art of sarcasm” – Glenn Sumi Now Magazine </span></br></div>
  5. cheebahawk
    Posted 3 years ago #

    Thanks again Triptripper.

    Yes that is how I laid out the 3 divs on the bottom of the page. It seems like on mobile, the image is the same size as the whole div.

    Is that because I have used width:290? Should I be using 100% instead?

    Sorry I am not a huge css expert.

    Thanks again.

  6. Triptripper
    TutsKid Ninja
    Posted 3 years ago #

    I am not a huge css expert

    Me too. But maybe someone else will have better ideas.

  7. idur
    Posted 3 years ago #

    i can't see that your website is responsive in themes ?
    you can start from twentytwelve theme as foundation of your themes building ...

Topic Closed

This topic has been closed to new replies.

About this Topic