Blog, Website & Page Publishing

davidgh01
Participante

Desperate! Make a landing page mobile responsive.

resolver

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...

2 Soluciones aceptadas
Mike_Eastwood
Solución
Asesor destacado | Partner nivel Gold
Asesor destacado | Partner nivel Gold

Desperate! Make a landing page mobile responsive.

resolver

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

 

Ver la solución en mensaje original publicado

webdew
Solución
Guía | Partner nivel Diamond
Guía | Partner nivel Diamond

Desperate! Make a landing page mobile responsive.

resolver

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.

Ver la solución en mensaje original publicado

2 Respuestas 2
webdew
Solución
Guía | Partner nivel Diamond
Guía | Partner nivel Diamond

Desperate! Make a landing page mobile responsive.

resolver

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
Solución
Asesor destacado | Partner nivel Gold
Asesor destacado | Partner nivel Gold

Desperate! Make a landing page mobile responsive.

resolver

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