Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hayden Template: Banner doesn't resize in mobile view


Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0
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??

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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”

E28D93C5-EC38-4515-8F44-E0D15604D579.png

You mean increase height?

https://prnt.sc/1a7l7se

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

 

IMG_0503.PNG

Hi. It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

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? 

Edited by breemelanson
Would you still be able to help with coding it so it automatically shows the full width in the mobile view? 
Link to comment
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Still need to fix these?

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

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

https://www.breemelanson.com/

breemelanson.com-01-min.png

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

https://www.breemelanson.com/

breemelanson.com-01-min.png

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

https://www.breemelanson.com/

breemelanson.com-03-min.png

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

https://www.breemelanson.com/

breemelanson.com-04-min.png

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

https://www.breemelanson.com/freemeditation

breemelanson.com-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...