Space between header and content on mobile version

Hello, I have to much space between header and content. It´s fine on the desktop version but if I decrease the size with the regular customizer option it will overlapp on the desktop version. Is there a ccs solution for mobile devices only?

https://perfect-escort.de/escorts/

Thanks for your help!

Hi there,

Please try to add this CSS code to Customize > additional CSS:

.page-wrap {
    padding-top: 0;
}
@media (min-width: 1200px){
    .page-wrap{
        padding-top: 100px;
    }
}

Regards,

Hello, thanks for the fast response but nothing changed.

Hello, it´s not working. Do I might need to add important somewhere or try a different code??? I have no idea. Thank you.

Hi,

Can you apply the code above? so I can check why the code is not working

Hello, thats the complete css + what you provided.

.page header.entry-header {
display: none;
}
.site-header:not(.float-header) {
background-color: rgba(255,255,255,0.9);
}
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
.page-wrap {
padding-top: 0;
}
@media (min-width: 1200px){
.page-wrap{
padding-top: 100px;
}
}

If I change the padding-top of the “1200px part” there´s also nothing happending.

.page-wrap {
padding-top: 0;
}
@media (min-width: 1200px){
.page-wrap{
padding-top: 10px;
}
}

This will also cause no change.

Thanks for your help!

Hello ?? Sorry, I dont want to be unfriendly but I am stil waiting for a answer.

Hi, can you put this on the top of your code?

.page-wrap {
    padding-top: 0;
}

Thanks for your help! It´s working fine for the mobile version but on big screens it´s overlapping the content.

The start page with the slideshow also works fine. But if you go on other pages you should see the issue. Thanks!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      body:not(.home) .sydney-hero-area {
        margin-top: 140px;
      }
    }

Regards,
Kharis
aThemes Support

Thank you for the fast reply, I tried this code now but it´s not working. I stil have to much space on the mobile version. I also tried to reduce the margin-top of the code but there´s no reaction or change.

Hello there,

Thank you for getting back.

Please keep the previous code remains and add this CSS code:

    @media only screen and (max-width: 1024px) {
      .page-wrap {
        padding-top: 0;
      }
    }

Regards,
Kharis
aThemes Support

I am sorry to keep you bussy with this but I added that, saved and nothing happens.

Hello there,

Thank you for getting back.

Can you check your all custom CSS code with this tool to check whether your can get invalid lines or not?

Regards,
Kharis
aThemes Support

Hello, the result is pointing out 2 reading errors. The website is german on the screenshot but the failed part is red and starts with “ups”.

Hello there,

Your screenshot shows some errors.

What will happen if you move few lines of code I just suggested to the most top?

Regards,
Kharis
aThemes Support

1 Like

Both codes worked when I moved them to the top. The following code was the best solution for small and wide screens. Thank you! :grinning: :ok_hand:

    @media only screen and (max-width: 1024px) {
          .page-wrap {
            padding-top: 0;
          }
    }

Great!

Glad to know you got the code. And thank you for sharing it here. I really appreciate it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support