Desperate! Make a landing page mobile responsive.

[davidgh01]

I'm glad to hire someone at this point, and would welcome recommendations.

I need this landing page to be mobile-responsive, and I am completely lost. Where should I start??

https://info.graphiumhealth.com/-temporary-slug-e1bcba68-38dd-40f2-9b2b-46e6ff3ffaca?hs_preview=rOLI...

[Mike_Eastwood · Accepted solution]

Hi @davidgh01 

I recommend creating CSS with breakpoints to display the content on a mobile and desktop.

If that sounds too geeky then send me a private message - with a link to your calendar - and we can jump on Zoom to discuss your design and what you'd like.

Typically we'd set up a Landing Page Template so you can reuse the design for future Landing Pages.

Looking forward to meeting you

Mike

[webdew · Accepted solution]

Hi @davidgh01 ,

For making things responsive in mobile and tab view you have to give css like this:-

For Tab responsive give css like this:- 

@media(max-width:1024px) and (min-width:768px){

#hs_cos_wrapper_module_15181166908571767 p, #hs_cos_wrapper_module_15181166908571767 li, #hs_cos_wrapper_module_15181166908571767 span, #hs_cos_wrapper_module_15181166908571767 label, #hs_cos_wrapper_module_15181166908571767 h1, #hs_cos_wrapper_module_15181166908571767 h2, #hs_cos_wrapper_module_15181166908571767 h3, #hs_cos_wrapper_module_15181166908571767 h4, #hs_cos_wrapper_module_15181166908571767 h5, #hs_cos_wrapper_module_15181166908571767 h6 {

•    font-size: 6vw !important;
•    line-height: 10vw !important;

}

// Write other css also in which you want changes

}

For Mobile give Css like this:-

@media(max-width:767px){ 

#hs_cos_wrapper_module_15181166908571767 p, #hs_cos_wrapper_module_15181166908571767 li, #hs_cos_wrapper_module_15181166908571767 span, #hs_cos_wrapper_module_15181166908571767 label, #hs_cos_wrapper_module_15181166908571767 h1, #hs_cos_wrapper_module_15181166908571767 h2, #hs_cos_wrapper_module_15181166908571767 h3, #hs_cos_wrapper_module_15181166908571767 h4, #hs_cos_wrapper_module_15181166908571767 h5, #hs_cos_wrapper_module_15181166908571767 h6 {

•    font-size: 4vw !important;
•    line-height: 10vw !important;

}

// Write other css also in which you want changes

}

(Note:- Since you have already given !important in your css(vast-style-min.css) then in responsive also you need to give important otherwise, it wont take)

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

[Mike_Eastwood · Accepted solution]

Hi @davidgh01 

I recommend creating CSS with breakpoints to display the content on a mobile and desktop.

If that sounds too geeky then send me a private message - with a link to your calendar - and we can jump on Zoom to discuss your design and what you'd like.

Typically we'd set up a Landing Page Template so you can reuse the design for future Landing Pages.

Looking forward to meeting you

Mike