facing responsive issue in mobile device

Develop, Build & Integrate CMS Development
1

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.

2

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