Landing Page Not Scaling Correctly

SOLVE
ForesightMDP
Member

Hello everyone!

 

I searched through the posts and could not find a solution to my problem. I called the help desk and they referred me here.

 

Anyways, I am having a problem with my landing page not scaling down correctly when on mobile. I am using a hero image that takes up the entire screen above the fold. I have some text over that background image as well. It looks great on a desktop, but looks aweful on mobile.

 

Apparently, correctly editing the CSS code is the solution. I am not familiar enough with CSS to fix it on my own, however. Does anyone have a solution on how to get it to scale?

 

Here is a link to my landing page. You will see that the "above the fold content" does not scale at all.

 

http://info.foresightmdp.com/management-development-program

 

Any other landing page critiques are welcome as well!

 

Thanks in advance for your help!

 

Best,

 

Ian

0 Upvotes
1 Accepted solution

Accepted Solutions
coreysmith
Solution
Top Contributor | Gold Partner

I took a few minutes looking at your code and I suspect the problem is bigger than what could be solved with media queries. There is an absolute position set for the image in that banner that seems to be causing problems. 

 

I also notice that there is quite a lot of usage of !important tags in your CSS declarations which indicates that you might be struggling a little with specificity. 

 

I might recommend you strip out all the custom CSS related to this and start over. If it's doing what I think it's doing it will be easier to start over and try to finess it with some small bits of CSS rather than using absolute positioning to brute force it.

 

Corey Smith
Founder - Tribute Media
smith@tributemedia.com

View solution in original post

2 Replies 2
edjusten
HubSpot Employee

Hi @ForesightMDP  Media queries are indeed the key to your success here.  Here are two web pages from W3Schools and Mozilla Dev Network that explain how media queries work, and two You Tube video's (here and here) that give a good visual  representation of how Media Queries work. 

 

That being said, this template is a bit complicated with various layers of stylesheets that will require some intermediate to advanced coding. 

 

Your best bet here would most likely be to target the image class (.hero-banner-image) using media queries and eliminate the image {display; none;} at mobile viewports - 400px max width. 

 

That will eliminate the images in mobile, which will elminate the clutter and allow more focus on the text. 

 

Tagging a few partners here. Any possibilities of a non-painful media query solution here @John @louiegerodiaz @josephLayden @coreysmith 

 

Thank you,

Ed Justen

 

 

 

 

 

 

 

 

 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
coreysmith
Solution
Top Contributor | Gold Partner

I took a few minutes looking at your code and I suspect the problem is bigger than what could be solved with media queries. There is an absolute position set for the image in that banner that seems to be causing problems. 

 

I also notice that there is quite a lot of usage of !important tags in your CSS declarations which indicates that you might be struggling a little with specificity. 

 

I might recommend you strip out all the custom CSS related to this and start over. If it's doing what I think it's doing it will be easier to start over and try to finess it with some small bits of CSS rather than using absolute positioning to brute force it.

 

Corey Smith
Founder - Tribute Media
smith@tributemedia.com

View solution in original post