Website isn't mobile friendly

[rvancroft]

I need to figure out how to make my website page mobile friendly or turn it off if I am not able to make it mobile friendly.

[josephLayden · Accepted solution]

You can use media queries to hide content.  To hide all on mobile add display: none; to the body element in CSS.

Otherwise use HS built in grid.  Add CSS classes of 'row-fluid' and 'span'

On mobile the example below will create full width spans while on desktop two 50% width columns in a single row.

<div class="container">
    <div class="row-fluid-wrapper">
        <div class="row-fluid">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
</div>
     

[josephLayden · Accepted solution]

You can use media queries to hide content.  To hide all on mobile add display: none; to the body element in CSS.

Otherwise use HS built in grid.  Add CSS classes of 'row-fluid' and 'span'

On mobile the example below will create full width spans while on desktop two 50% width columns in a single row.

<div class="container">
    <div class="row-fluid-wrapper">
        <div class="row-fluid">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
</div>
     

[rvancroft]

I need someone to walk me through this process. Thanks.

[josephLayden]

Do you know CSS or HTML? Or are you using the Design Manager?

Here are the basics:

http://designers.hubspot.com/docs/cos/the-cos-responsive-grid

[rvancroft]

I don't know CSS or HTML, and I have been directed in the past to use the Design Manager, but I don't know fully how to use it. 

[josephLayden · Accepted solution]

I would recommend downloading a free template from the hubspot marketplace and using this to build upon in that case.  Anything you create in the design manager will have the HubSpot grid automatically applied.  

Check out this free workshop:

https://offers.hubspot.com/design-for-non-designers-live