Correcting header banner on desktop to be the same as mobile view

[bond2you]

Hi all,

I have copied and pasted code from other posts and it has not worked for my banner. As you can see, the desktop view looks nice but as soon as it is switched to mobile view, it is cut off.

How can I make the image resize so it looks good on mobile view?

 

 

[BSS-TekLabs]

I don't see them appearing on your website at the moment. Have you made it public yet?

[bond2you]

yes, can you see it now?

[bond2you]

some of the image for some reason has been cut off at the top and bottom, it doesn't look like that when I'm editing

[BSS-TekLabs]

- Here is the solution for you @bond2you 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.slideshow__slide .slideshow__media img {
     height: auto !important;
}
.slideshow__slide .slideshow__media {
     height: 220px !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[bond2you]

Hi it's still not looking right, the desktop view is now looking cut off

[BSS-TekLabs]

@media screen and (max-width: 749px) {
.slideshow__slide .slideshow__media img {
     height: auto !important;
}
.slideshow__slide .slideshow__media {
     height: 220px !important;
}
}

can you try it @bond2you 

[BSS-TekLabs]

Please replace the old code with the new code above @bond2you 

[bond2you]

It still didn't work 

[BSS-TekLabs]

You added a missing } in line 3574 @bond2you 

[bond2you]

sorry, tell me what I need to remove?

[BSS-TekLabs]

You need to add a } above the line @media screen and (max-width: 749px) {
Same as the image I sent above

[bond2you]

I think it worked! There is a blank white space underneath but I think I can live with that. 

Also, this desktop which I think is a separate issue. Do you know how to fix it to make it look like the second image as I see it when editing?

[BSS-TekLabs]

@bond2you  can you add more code

@media screen and (min-width: 749px) {
#Slide-template--22839493755190__slideshow_HLayiA-1 {
     height: 768px !important;
}
}

[bond2you]

great, I think it worked! 

but how do I get rid of this white spacing that is in mobile view between the header and next section?

[BSS-TekLabs]

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
 display: none !important;
    }
}

- You can add more code

[bond2you]

omg thank you so much!

[BSS-TekLabs]

No problem. Have a good day @bond2you .

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.