CMS Development

ForesightMDP
Member

Landing Page Not Scaling Correctly

SOLVE

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
coreysmith
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Landing Page Not Scaling Correctly

SOLVE

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

--
Corey Smith
Directory of Digital Marketing
corey@intuitivewebsites.com

View solution in original post

2 Replies 2
coreysmith
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Landing Page Not Scaling Correctly

SOLVE

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

--
Corey Smith
Directory of Digital Marketing
corey@intuitivewebsites.com
edjusten
HubSpot Employee
HubSpot Employee

Landing Page Not Scaling Correctly

SOLVE

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