Image on full width page not mobile responsive

Homepage › Community Forums › Legacy Theme Support › Image on full width page not mobile responsive

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 7, 2015 at 9:39 am #16186
    Rainbowsurfer
    Customer

      Hi Wes

      I’ve increased the size of images on a full width page in Legacy to width 950. It looks OK on a desktop but not on a mobile. On a mobile the image is too big for the screen. Is there a way to make the image mobile responsive.

      Thanks

      August 7, 2015 at 5:23 pm #16194
      Jessy
      Customer

        Hi, do you have a link to your site?

        August 11, 2015 at 1:57 am #16201
        Rainbowsurfer
        Customer

          Yep carbidoff.com

          August 11, 2015 at 8:23 am #16273
          Jessy
          Customer

            Is there a specific page that shows the issue? Because I’m not seeing any issues when I check the link/homepage.

            August 19, 2015 at 11:59 pm #16275
            Eric
            Customer

              @Rainbowsurfer Try adding this to your CSS – 

              .wp-caption img {
    width: 100% !important;
}

              Although, that will only work if you’re able to remove the Width that is being added inline in your code. When I look at your Source Code, I can see the first image on this link – http://www.carbidoff.com/car-repair/ has a Fixed Size added Inline in your code. If you add it Inline then it sort of Overrides the Responsive CSS features. So that’s why the Responsive Features aren’t working properly. Once you remove those it should work back to normal.

              I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

              August 20, 2015 at 12:53 am #16276
              Andykev
              Customer

                src=”http://www.carbidoff.com/wp-content/uploads/2012/10/Man-about-car-service.jpg” alt=”Man about car service” height=”679″ width=”950″>

                You have the image set at “width 950px” which is a FIXED value.

                Change it and the other one on the next page to “width= 100%”

                This makes the image size approprately to the screek (Desktop, Ipad, Iphone).

                Like Eric said….

                August 20, 2015 at 10:50 am #16278
                Rainbowsurfer
                Customer

                  Hi guys thanks so much for that.

                  I put the CSS code in and added 100% width but unfortunately the only way to get the images to appear properly on mobiles is to take off the caption and remove the fixed image size and the 100% width.

                  Do you know if it’s possible to have a caption on and still have the image show properly on mobiles?

                  Thanks again for all the help

                  August 22, 2015 at 11:04 pm #16285
                  scooby
                  Customer

                    I’ve checked Multiple links on your site from my iPhone and everything looks Perfect from my end. What’s the link to the specific page/issue you’re having directly?

                    August 24, 2015 at 3:41 am #16301
                    Rainbowsurfer
                    Customer

                      Hi Scooby

                      Thanks for checking but I’ve taken off all the captions so that the images look ok on mobiles.

                      I was just wondering if it was possible to have captions on the images because when I put the caption in, the image width and height automatically appear in the page code. That then makes the image too big on mobiles because it has a fixed width.

                      August 24, 2015 at 2:22 pm #16338
                      scooby
                      Customer

                        What @eric wrote should work, but you should put that code inside the Mobile Responsive section/area of your CSS. If you do that, when a user is viewing your site from a mobile device the code will trigger the image to become responsive rather than a fixed width. Try that out and let’s see how it goes.

                        August 31, 2015 at 9:27 am #16347
                        Rainbowsurfer
                        Customer

                          Hi Scooby
                          Thanks for the additional help. I put @eric’s code in the css sections headed:

                          /* Desktops, laptops and iPads (landscape)
                          ——————————————— */

                          @media only screen and (max-width: 1480px) {

                          On page http://www.carbidoff.com/traders/ I’ve put the caption in and the image is now too big. Have I put the css code in the wrong section?

                          Many thanks

                          August 31, 2015 at 3:09 pm #16348
                          Andykev
                          Customer

                            You are placing the image with the size fixed at 950px. You must change it to 100%. Once you do that it works when you size the page to Iphone size. It’s the settings of the image upload.

                            <img class=”wp-image-14901 size-full” src=”http://www.carbidoff.com/wp-content/uploads/2011/06/Mechanic-joining-CarBidOff.jpg&#8221;
                            alt=”Mechanic joining CarBidOff” height=”633″ width=”950″><p class=”wp-caption-text”>If you want to get more work give CarBidOff a go</p>

                            Change to this”

                            <img class=”wp-image-14901 size-full” src=”http://www.carbidoff.com/wp-content/uploads/2011/06/Mechanic-joining-CarBidOff.jpg&#8221;
                            alt=”Mechanic joining CarBidOff” height=”633″ width=”100%”><p class=”wp-caption-text”>If you want to get more work give CarBidOff a go!</p>

                          • Author
                            Posts
                          Viewing 12 posts - 1 through 12 (of 12 total)
                          • You must be logged in to reply to this topic.