CMS Development

AbhilashDN
Membre

facing responsive issue in mobile device

Résolue

https://blog.imocha.io/ this is our blog, when we open it in mobile then our half first fold is not visible due the both button.

0 Votes
1 Solution acceptée
Anton
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

facing responsive issue in mobile device

Résolue

Hi @AbhilashDN

unless you're gonna code something custom this is a default behavior of HubSpot. Every column will be translated to full-width on mobile. 

 

  • Change your CSS or add some lines of code to it.  Currently your buttons get their mobile styling from this code:
@media (max-width: 767px){
body a.cta_button[title], body .container-fluid .row-fluid .hs-button {
    font-size: 14px;
    box-sizing: border-box!important;
    width: 100%;
    max-width: 360px;
    padding-left: 0;
    padding-right: 0;
}

If you remove the both widths they will be inline and have auto-width. 

 

But since this can lead to unwanted changes in other places I'd suggest to do is to add this line(s) of code at the very bottom of your CSS:

@media (max-width: 767px){
.header .hs-button {
    width: auto;
  }
}

if this shouldn't work - go the sledgehammer route by adding !important like this to it

@media (max-width: 767px){
.header .hs-button {
    width: auto !important;
  }
}

 

 

best, 

Anton

 

Anton Bujanowski Signature

Voir la solution dans l'envoi d'origine

1 Réponse
Anton
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

facing responsive issue in mobile device

Résolue

Hi @AbhilashDN

unless you're gonna code something custom this is a default behavior of HubSpot. Every column will be translated to full-width on mobile. 

 

  • Change your CSS or add some lines of code to it.  Currently your buttons get their mobile styling from this code:
@media (max-width: 767px){
body a.cta_button[title], body .container-fluid .row-fluid .hs-button {
    font-size: 14px;
    box-sizing: border-box!important;
    width: 100%;
    max-width: 360px;
    padding-left: 0;
    padding-right: 0;
}

If you remove the both widths they will be inline and have auto-width. 

 

But since this can lead to unwanted changes in other places I'd suggest to do is to add this line(s) of code at the very bottom of your CSS:

@media (max-width: 767px){
.header .hs-button {
    width: auto;
  }
}

if this shouldn't work - go the sledgehammer route by adding !important like this to it

@media (max-width: 767px){
.header .hs-button {
    width: auto !important;
  }
}

 

 

best, 

Anton

 

Anton Bujanowski Signature