Solved

DEBUT Theme - banner and header overlap

Marvimoto
New Member
4 0 0

Hello, I have a problem.

I entered a code in the Debut Theme that fixes the header and the announcement when scrolling down. Everything works. But I want the header not to overlap the cover photo. Can someone help me please.

Many greetings Marvimoto

Accepted Solution (1)

Michal17
Shopify Partner
835 73 175

This is an accepted solution.

Hello @Marvimoto,

You are welcome.

Please Go to Online Store ->Theme->Edit code then go to assets/theme.css.liquid -> find the below code in the file.

#PageContainer {
    padding-top: 80px;
}

and replace it with :

#PageContainer {
    padding-top: 90px; 
}

 Another way would be to just paste the below code at the bottom of the file :

#PageContainer {
    padding-top: 90px !important; 
}

Please let me know if you have any further questions.

View solution in original post

Replies 9 (9)

Michal17
Shopify Partner
835 73 175

Hello Jacklane,

Kindly welcome to the Shopify Community.
I properly read your problem and need to carefully analyze your website to provide a solution here.
Would you kindly share your website URL and if your website is password protected then also provide a password?

I will carefully check out the issue and provide a solution to you here.
Please let me know if you have any further questions.

Marvimoto
New Member
4 0 0

https://famydino.myshopify.com/?_ab=0&_fd=0&_sc=1&key=0c8acaeeb17a5dfbd36c04277e929379b5dba78fa0b248...

 

I hope thats the correct link u need.

 

Thank you very much for fast answer.

 

 

Michal17
Shopify Partner
835 73 175

This is an accepted solution.

Hello @Marvimoto,

You are welcome.

Please Go to Online Store ->Theme->Edit code then go to assets/theme.css.liquid -> find the below code in the file.

#PageContainer {
    padding-top: 80px;
}

and replace it with :

#PageContainer {
    padding-top: 90px; 
}

 Another way would be to just paste the below code at the bottom of the file :

#PageContainer {
    padding-top: 90px !important; 
}

Please let me know if you have any further questions.

Marvimoto
New Member
4 0 0

Thank you Michael it works!!

 

Yes I have another question.

 

Is there a way to set the headbanner and cover image separately in the desktop and smartphone version?

I would like to set the dimensions individually depending on which device you are looking at.

 

Michal17
Shopify Partner
835 73 175

@Marvimoto  You are welcome

What are you trying to do? To set different head banners and cover images in the desktop and smartphone versions?

Michal17
Shopify Partner
835 73 175

It's definitely possible to set different images for desktop & mobile. Also, it can be managed using theme settings (native builder of Shopify, you're probably using him every day) so no coding knowledge to change the images will be needed.

However, creating a structure to be able to embed different images for mobiles & desktop is not something that can be done within 5 minutes. 

Marvimoto
New Member
4 0 0

Hi Michael,


I would like to put 2 different pictures at the top to greet the customers on the page. A picture should only be shown when customers are looking at a smartphone. The other picture when someone is sitting at the desktop. The point is that the banner is very stretched in the desktop version and a lot of information is lost at the top and bottom.
I know I can make it bigger too. I would like to keep the size in the desktop version on "small" so that you can see products underneath. If I could adjust the cover picture individually, I would be able to design the picture so that it is optimized for the desktop version.

So far I haven't found any function in shopify native builder to do that.

I hope you can help me.

Thank you!!

ADMLees
Visitor
1 0 0

Hi @Michal17 

Can you help me?

Michal17
Shopify Partner
835 73 175

Hi @ADMLees 

Let me check it and get back to you.