Image-size in Welcome Area

  • @richard.boom

    I have added some css code in the Custom Code section of Integral Options.

    They are several break points (media quieries) for different mobile device sizes.

    You can tweak it as you need.

    Also, you will see I hide the box shadow (grey border).

    Thanks!! I noticed I can indeed tweak it a lot, but I have yet to see which sizes screen can be managed best with which exact coding.

    That is really tough, so if anybody has some sort of format, then please!
    I can not imagine I was the first to come up with this question 🙂

    You can narrow the browser window width to see how it will respond.

    In the net release of Integral Pro, coming out in a few days, there will be a fix for exactly this issue.

    For real? Then I guess I only have to wait 🙂

    This reply has been marked as private.

    You said ” In the net release of Integral Pro, coming out in a few days, there will be a fix for exactly this issue. “… any word on when this will be released?

    Hi Richard,

    Yes on Monday we will release an update.

    Version 1.2.6.

    This reply has been marked as private.


    The update was released yesterday.

    We just didn’t send out a notification email yet.

    Make sure you create a backup BEFORE you update.

    a sweet. Thanks! I used the Plugin you recommended, so thanks for that!

    In the net release of Integral Pro, coming out in a few days, there will be a fix for exactly this issue.

    Been trying to see the change but I do not see it. In the Welcome section I can only select the padding for the total area, but not to get it responsive for different devices as was the context of my questions and -I believe- your replies.

    Can you show me where it is residing? Been looking for an hour now!

    We made two fixed in the latest release.

    We added fixed padding for the welcome section so that the header area wouldn’t overlap the titles in the welcome section.

    We also reduced the size of section titles on mobile devices so that they would fit.

    This was done in the style.css file at the bottom.

    Thanks Hans.

    I have been trying to get it right using this code

    @media (max-width: 1400px) { .hero {padding: 800px 0 110px 0 !important;}

    @media (max-width: 1200px) { .hero {padding: 700px 0 100px 0 !important;}

    @media (max-width: 979px) {

    .hero {padding: 400px 0 80px 0 !important;}

    @media (min-width: 768px) and (max-width: 979px) {
    .hero {padding: 400px 0 70px 0 !important;}

    @media (max-width: 767px) {

    .hero {}


    @media (max-width: 480px) {

    .hero {padding: 325px 0 220px 0 !important;}


    Which works in most cases but NOT with 4.7 inch Iphones or an 21 inch MacBook (which happen to be of my client) although it works fine with my 15″laptop, my 17″screen or my 5″ Android Phone

    If I for instance use max-width: 30000px it completely transforms the website even for smaller screens.

    Do you have an extra idea?

    I am not 100% sure what you are trying to accomplish.

    If you are worried about the top header (with menu) bleeding over into your Welcome section BG image, that is normal since it is a fixed header. You can try disbaling the sticky header setting.

    Or you will probably just need to edit your image to include more white space at the top.

    Well… I would like to accomplish a nice resonsive moment per screen and I just wish someone would happen to know the correct dimensions to use in the code I have added.

    The header-logo is not really that big so I think it is not the fact that it is bleeding over since the logo is not really bigger then the menu even.

    Somehow the Welcome-image is just not reacting responsive enough and I have no idea what to do…

    Only thing I can think of is someone letting me know about “@media” and “.hero {padding” settings. Otherwise I have no idea what to think of it.

    And since this is YOUR theme (not mad or anything) I just thought you had better ideas about this, hopefully

    Ok, let’s start from the top.

    If you need more media queries for other device types, this will definitely help you

    Now you can specify for every device.

    However, this is a little extreme in my opinion.

    I understand how certain clients can be very picky, so I understand where you can coming from.

    The theme is set to use X amount of pixels for top and bottom padding. And this carries over on mobile devices. If you want to adjust for those specific devices then use the link I have provided.

    Let me know if this helps.

You must be logged in to reply to this topic.