Problem w/ responsiveness welcome section

  • Resolved traktionswerk

    (@traktionswerk)


    3 years, 5 months ago

    Hi there,

    we have a problem with the way the welcome section image gets shown on desktop vs. mobile devices.

    Problem: On desktop the welcome section image is displayed correctly, however, on mobile only the center part of the image is shown. Most solutions on the web consist of adjusting the padding to % instead of pixels, which did not lead to the solution or the final solution is only shown as a private message.

    I am looking forward to some more detailed help!

    We are running Integral Pro 1.5.4.

    Thanks a lot!

    Florian

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author themely

    (@themely)

    Hello Florian,

    You can adjust the padding size for smaller devices which will solve the issue.

    There are existing media queries located in the style.css file towards the bottom.

    Add the following CSS selector:

    .hero {padding-top:100px;padding-bottom:100px;}

    You can adjust the padding size to what you want.

    • This reply was modified 3 years, 5 months ago by themely.
    Thread Starter traktionswerk

    (@traktionswerk)

    Thank you for your quick reply!

    I am afraid that I will need a bit more support, as I am not a professional.
    Rather novice-level understanding.

    Where exactly is .hero {padding-top:100px;padding-bottom:100px;} supposed to be added at the bottom of the CSS file?

    Section /* Responsive or /* Browser Specific Media Queries

    Is this the only addition that is to be made?

    I need the solution rather fool-proof.

    Thank you for your understanding! ??

    Theme Author themely

    (@themely)

    Hello Florian,

    No problem.

    Add it on line 1667 just below @media (max-width: 767px) {

    Thread Starter traktionswerk

    (@traktionswerk)

    Thank you!
    We are getting there!
    I have found @media (max-width: 767px) { online in line 1849 in style.css

    Then I have added .hero {padding-top:100px;padding-bottom:100px;} and is has an effect on mobile, while leaving desktop untouched. So far so good.

    Best result was actually .hero {padding-top:0px;padding-bottom:0px;}, however, parts of the welcome image get still cut of.

    Is there any more room for improvement?

    Theme Author themely

    (@themely)

    You can try adjusting the background size.

    .hero {background-size: 100% auto !important;}

    Try that.

    Thread Starter traktionswerk

    (@traktionswerk)

    Do you mean placing .hero {background-size: 100% auto !important;} below .hero {padding-top:100px;padding-bottom:100px;} ?

    (I did that without effect to the mobile site.)

    Any idea what might be wrong?

    Theme Author themely

    (@themely)

    Place it together like this,

    .hero {
background-size: 100% !important;
padding-top:100px;
padding-bottom:100px;
}
    • This reply was modified 3 years, 5 months ago by themely.
    Thread Starter traktionswerk

    (@traktionswerk)

    I have tried placing it together, however, changing the value of “background-size” had no effect. Padding hat the previous effect, but not sufficiently.
    Any more angle we can try?

    Theme Author themely

    (@themely)

    Hello,

    Ok, in that case place the following code at the very bottom of the style.css file (right after Custom CSS.

    @media (max-width: 767px) {
    .hero {
        background-size: 100% !important;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
    Thread Starter traktionswerk

    (@traktionswerk)

    You are the man!
    That worked!
    Thanks a lot!

    Theme Author themely

    (@themely)

    You’re welcome.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Problem w/ responsiveness welcome section’ is closed to new replies.