CMS Development

panlau
Participant

Improving page responsiveness design

SOLVE

I use the drag and drop feature to create a landing page on Hubspot. It looks fine on Hubspot preview, but it looks different when it goes live on the tablet. One of the column doesn't "automatically" change from <span-6> (responsive veiw) to <span-12>  on tablet view, but it works fine on mobile view.  Since I build the page using the drag and drop, I don't quite sure how I can fix it? 

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Improving page responsiveness design

SOLVE

@panlau 

Do you know what width the tablet screen is that you're testing on? I know some are around 800px wide whereas Hubspot's responsive styling only starts at 768px wide so that could possibly be the reason why you're not seeing the responisve change on tablet.

 

To change this, in the Page Editor, go to Settings > Advanced Options > Additional code snippets and in the Head HTML text box you can add :

@media (max-width: 801px) {
    .widget-span.span6 {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

2 Replies 2
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Improving page responsiveness design

SOLVE

@panlau 

Do you know what width the tablet screen is that you're testing on? I know some are around 800px wide whereas Hubspot's responsive styling only starts at 768px wide so that could possibly be the reason why you're not seeing the responisve change on tablet.

 

To change this, in the Page Editor, go to Settings > Advanced Options > Additional code snippets and in the Head HTML text box you can add :

@media (max-width: 801px) {
    .widget-span.span6 {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
sharonlicari
Community Manager
Community Manager

Improving page responsiveness design

SOLVE

Hey @panlau    

 

could you please provide the URL you are working on? With this information, our experts will be able to guide you. I'll tag a few experts that can share their experience with you.    

 

Hey @albertsg @alyssamwilie @stefen any thoughts you would like to share with @panlau ? 

 

Thanks

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes