Hayden Template: Banner doesn't resize in mobile view

Site URL: http://www.breemelanson.com/beyond-form

Hi there, 

The banner at the top is the right size but I have two other banners on the page and am unable to resize them on the mobile view. 

Can some one help or @tuanphan

Thank you!

18 hours ago, breemelanson said:

Site URL: http://www.breemelanson.com/beyond-form

Hi there, 

The banner at the top is the right size but I have two other banners on the page and am unable to resize them on the mobile view. 

Can some one help or @tuanphan

Thank you!

Hi. I see top banner only. Where is 2 other banners??

Hi Tuan, 

I deleted one of the banners so now it’s just the banner towards the bottom that I’m having trouble with. 

The section “banner-2”

16 hours ago, breemelanson said:

Hi Tuan, 

I deleted one of the banners so now it’s just the banner towards the bottom that I’m having trouble with. 

The section “banner-2”

You mean increase height?

https://prnt.sc/1a7l7se

Hi @tuanphan, 

I want the full width to show up on mobile view.

This is how it looks when I see this banner from my phone

On 7/12/2021 at 11:27 AM, breemelanson said:

Hi @tuanphan, 

I want the full width to show up on mobile view.

This is how it looks when I see this banner from my phone

 

Hi. It looks like you solved this?

Hi @tuanphan, 

It hasn't been solved, it's still not the full width and is cut off. It's the second banner towards the bottom of the page. 

Hi @tuanphan, 

I've updated the banners so the text is in the middle and shows up in the mobile version correctly. I still need help with coding because this was a workaround since I can't get the banner on the mobile version to work out. 

Would you still be able to help with coding it so it automatically shows the full width in the mobile view? 

Actually, I see fine here. It looks like problem appear on iPhone only.

Can you check on another mobile? If it still error, I will send CSS to add background image with CSS background image. I think it will fix problem.

https://www.loom.com/share/5e125e5cece84688bd0febd2cd11331e

Hi @tuanphan, 

The reason why it looks okay for now because I resized the text since I couldn't figure out how to make it work. 

Can you please share the CSS? 

Thank you

On 7/19/2021 at 12:30 PM, breemelanson said:

Hi @tuanphan, 

The reason why it looks okay for now because I resized the text since I couldn't figure out how to make it work. 

Can you please share the CSS? 

Thank you

Add to Design > Custom CSS

/* Mobile first banner */
@media screen and (max-width:640px) {
div#new-page .banner-thumbnail-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2021/07/16/09/54/travel-6470467__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

div#new-page figure img {
    visibility: hidden;
}
}

Still need to fix these?

Site URL – https://www.breemelanson.com/

1. (Desktop – Homepage) The white block overlaps the menu.

https://www.breemelanson.com/

2. (Desktop – Homepage) Menu items are not aligned.

https://www.breemelanson.com/

3. (Mobile/Tablet – Homepage) Scroll bar at the bottom.

https://www.breemelanson.com/

4. (Mobile – Footer) Text beyond form is cut to the next line.

https://www.breemelanson.com/

5. (Tablet – Freemeditation) Text Psychic bootcamp is cut into 2 lines.

https://www.breemelanson.com/freemeditation