Hello! So, I have a new page I am trying to make. I do not want the changes to affect the other pages I have already. I have set the H1 size already, and I have managed to change the max-height as well for the banner image/section. However, when I did the max-height the text ("Auto Detailing For Tulsa, OK") and image/logo stayed in the same place and did not adjust itself.

I am trying to find a way to move the text and image higher in the image, not all the way to the top, more centered. I have tried margin-bottom and padding-bottom and nothing changes with it. I am not sure if it is even possible to do. 

any help on this would be great. The new page is this https://www.kaliberautodetailing.com/new-page-2

Hello,

You need to decrease the padding top of an element from Custom CSS.
You will need to do this inside all 3 media queries
 

@media screen and (max-width: 1280px) {
    .Intro--has-image .Intro-content {
        padding-top: 100px;
        padding-bottom: 180px;
    }
}

2 hours ago, sorca_marian said:

Hello,

You need to decrease the padding top of an element from Custom CSS.
You will need to do this inside all 3 media queries
 

@media screen and (max-width: 1280px) {
    .Intro--has-image .Intro-content {
        padding-top: 100px;
        padding-bottom: 180px;
    }
}

 

Hey! Thanks for the reply! Interesting. I did also try negative numbers in the padding and margin , but I could not get it to move. I might have missed the right selector then. I see that you did a media query which I will absolutely use to make sure it is right on mobile as well. 

But what would be the main one for desktop?

would it just be the following with out the @media?

.intro--has-image .Intro-content {

padding-top:100px;

padding-bottom: 180px;

}

Edit. I just tried it without the media query, and it did work on desktop. Perfect! I appreciate the help! No idea why it didn't work for me earlier when I was messing with the inspect element section. Actually, now that I am thinking about it, a lot of the margin-top and so forth was crossed out and when I added it then it crossed it out as well. Maybe it was the wrong section then. But thank you again!

6 hours ago, sorca_marian said:

Hello,

You need to decrease the padding top of an element from Custom CSS.
You will need to do this inside all 3 media queries
 

@media screen and (max-width: 1280px) {
    .Intro--has-image .Intro-content {
        padding-top: 100px;
        padding-bottom: 180px;
    }
}

 

Hello again. So I spoke a little too soon. I see that on the desktop it works great. But on the mobile phone the logo is huge and I cannot see the text at all. How would I be able to make those fit or resize them so that the logo image and the text both fit in the screen and look the way it should?  Thank you

Also, the text and the position looks good on tablet, but the image is super small. 

Add this CSS for mobile 

 

@media (max-width: 767px) {
    .Intro--has-image .Intro-content .span-12 > :first-child > * {
        max-width : 100px;
        margin : auto;
    }

    .Intro--has-image .Intro-content h1 {
        font-size : 50px!important;
    }
}