Change size of header image on mobile version brooklyn theme

Solved
Emelie
Excursionist
29 0 10

Hey hey! 
I am really annoyed over one thing on my webbshop.... I want the header image to cover more than it does now on the mobile version since it does not look good when the navigation bar covers half of the header picture... The desktop version is good but it looks like the image is cut shorter on the mobile version. How do I change the image size margins/size on mobile version to make the image go further down (see screenshot). I have gotten really good help in here before so I cross my fingers that someone knows how to solve this as well!  

Screenshot_20210914_202712_com.android.chrome.jpg

URL: racketbollen.se
Password: dobewrr

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24919 2497 9033

This is an accepted solution.

@Emelie 

can you please try this code

@media only screen and (min-width: 992px) {
.template-index .header-wrapper {
    margin-top: -110px !important;
    height: 110px !important;
}
.header-wrapper {
    margin-top: 0px !important;
    height: auto !important;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 21 (21)
KetanKumar
Shopify Partner
24919 2497 9033

@Emelie 

yes please try this way

https://www.mojoin.com/show-shopify-banner-image/ 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
2236 565 1373

hello @Emelie 

for this you have to  Show Different Shopify Banner Image on Desktop and Mobile

 

Emelie
Excursionist
29 0 10

Thank you for your reply! Does this work for Brooklyn theme as well? In the guide it says Debute theme. 

KetanKumar
Shopify Partner
24919 2497 9033

@Emelie 

yes its work all doesn't matter any theme  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Emelie
Excursionist
29 0 10

Hey again @KetanKumar!

I have now been able to try your tutorial on how to get different images as desktop and mobile header. I like your easy-to-follow way of explaining so many thanks!!
Though I have 3 issues that I don´t seem to solve on my own... See screenshots on how it looks like now. 

1) There is white space above the announcement bar. How do I get rid of this? 
2) There is space above the navigation bar and announcement bar when scrolling. So there is a gap that I would love to get rid of. (I assume this also has to do with my first question above).
3) On desktop the image need to cover full width like it did before. On mobile it looks good.  

I have tried to paste follwing code in my theme.scss.liquid but nothing happens. 
.yx-desktop-hidden{
width: 100%;
padding: 0 !important;
}
.yx-mobile-hidden{
padding: 0 !important;
max-width: 100vw !important;
}

Do you know how I can fix this?  
(URL: racketbollen.se, password: dobewrr)

Skärmbild 2021-09-20 093020.jpgSkärmbild 2021-09-20 092958.jpg

KetanKumar
Shopify Partner
24919 2497 9033

@Emelie 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.img-responsive {
    width: 100%;
}
@media screen and (max-width: 768px) {
.yx-desktop-banner-section {
    display: none;
}
}

can you please try this code

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Emelie
Excursionist
29 0 10

Thank you so much @KetanKumar , now the header image is correct size! The issue with the navigation and announcement bar is still there though. Do you know how I can remove the padding above those? (see screenshots in my previous reply)


KetanKumar
Shopify Partner
24919 2497 9033

@Emelie 

yes please add this code

.header-wrapper {top: 0;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Emelie
Excursionist
29 0 10

@KetanKumar 

Unfortunately it does not make any difference (See screenshot of all the code I have added to make the mobile and desktop header different)

Skärmbild 2021-09-21 073159.jpg

 

It still looks like the navigation bar is too far down:  

padding above navigation.jpg

 When scrolling: 

navigation too far down when scrolling.jpg