Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 30, 2017 at 7:55 am #883286
    webstuff81

    Hi,

    I’m trying to replicate the following image in the right column.

    The computer mockup is in the right column. When it’s full screen the image is to the far right,
    so much so that half of the image is cut off, almost as if it was centered in the 1/2 column.

    Here’s the example website:

    Home Page

    When the screen size is shrunk down the image is as well, and you can now see the full image, albeit smaller.

    I’ve tried to replicate this, for example:

    I’m usign the full sized image.. 1238px x 638px

    But it displays like:

    • This topic was modified 7 years ago by webstuff81.
    December 1, 2017 at 9:08 pm #884003
    webstuff81

    Any help on this would be greatly appreciated. Thanks

    December 3, 2017 at 12:03 am #884208
    Mike

    Hi,
    I removed your image and added it as the color section background, then added this css to position the image to the right edge by percentage and resize it depending on screen size:

    @media only screen and (min-width: 1440px) { 
#get-growflow {
    background-position: center right -55%!important;
}
}
@media only screen and (max-width: 1439px) { 
#get-growflow {
    background-position: center right -50%!important; 
    background-size: 70%;
}
}

    For mobile phone I suggest that you use the screen options in the color section to hide the background image, and add your other image back so it drops below the text, or just hide it completely. I wasn’t sure which way you would want to go.
    If you don’t like this solution, feel free to use the page Revisions to revert back, and remove the css from the General Styling > Quick CSS field
    2017-12-02_165230

    Best regards,
    Mike

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