See the same image when reduce width of browser

  • Resolved wpuser131

    (@wpuser131)


    9 years, 3 months ago

    Hello. I am pretty sure this is somewhere on the web, but I just can’t find the solution. All I find is solutions that cancel the responsiveness of the site, so you have to scroll right and left when you have smaller browser window.

    When I resize my browser window,(with stable height), what happens is the following: The top div gets smaller, as the height is set to auto. So I get to see things that I would have to scroll down in order to see then with larger widths. What I want is to see for all the width sizes, the same homepage photo. (of course, I mean part of it)

    While this is the site I want to correct : https://www.alatimou.com/
    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Would you go with a solution that crops the main image on the X axis?

    Thread Starter wpuser131

    (@wpuser131)

    Actually this is what I was thinking. (Is there any other if you want to keep rensponsiveness?)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can’t change the ratio of the image, so no I don’t think there is another way to go about it.

    Thread Starter wpuser131

    (@wpuser131)

    So how would you implement the solution you mentioned?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:

    1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
    2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
    3. (put this code in)

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

    body .et_pb_image_0 img {
        max-width: none;
        width: auto;
    }

    .et_pb_image {
        overflow: hidden;
    }
}
    4. Save

    Alternatively use your Child Theme style.css file to hold your CSS modifications

    Have you talked to your theme’s vendors/ authors about this?

    Thread Starter wpuser131

    (@wpuser131)

    Cool, that works, thanks a lot.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘See the same image when reduce width of browser’ is closed to new replies.