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 Solução aceitas
Mike_Eastwood
Solução
Conselheiro(a) de destaque | Parceiro Ouro
Conselheiro(a) de destaque | Parceiro Ouro

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

 

Exibir solução no post original

webdew
Solução
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

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.

Exibir solução no post original

2 Respostas 2
webdew
Solução
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

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
Solução
Conselheiro(a) de destaque | Parceiro Ouro
Conselheiro(a) de destaque | Parceiro Ouro

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