CMS Development

randymalmquist
Member

Images/text for landing page wont remain responsive

SOLVE

Hello, trying to create a landing page with some images justified right and others justified left. The problem is that when the page is viewed in mobile the text is not above the image as it should, the text next to the right alligned text is stacking on top of the text for the left alligned text, thus making it look like poo. 

 

thanks

1 Accepted solution
Jsum
Solution
Key Advisor

Images/text for landing page wont remain responsive

SOLVE

@randymalmquist,

 

You have alternating sections and on mobile they are stacking wrong?

 

What @Phil_Vallender says is correct. The browser pulls elements to the the top and left and right elements stack under left. 

 

I see this alot though and I have, what is for me, a simple fix. It involves using flexbox, which is some fancy structural css that isn't completely supported so needs browser prefixes on it's css attributes so it looks more complicated than it is.

 

<div class="section_parent">
    <div class="section left">

    </div>
    <div class="section right">

    </div>
</div>

<div class="section_parent">
    <div class="section left">

    </div>
    <div class="section right">

    </div>
</div>


<style>
  .section_parent {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
    }

    .section {
         flex: 1;
         -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        height: 200px;
     }
     
     .section_parent .section.right {
       background: red;       
     }
     
     .section_parent .section.left {
       background: blue;       
     }
     
     .section_parent:nth-child(odd) .section.right,
     .section_parent:nth-child(even) .section.left {
          order: 2;
          -webkit-order: 2; 
          -moz-order: 2;
          -ms-order: 2;
          -o-order: 2;
      }
      
      .section_parent:nth-child(even) .section.right,
      .section_parent:nth-child(odd) .section.left {
          order: 1;
          -webkit-order: 1; 
          -moz-order: 1;
          -ms-order: 1;
          -o-order: 1;
      }

     @media (max-width: 768px) {
       
        .section_parent { 
             flex-direction: column;
             -webkit-flex-direction: column;
             -moz-flex-direction: column;
             -ms-flex-direction:column;
             -o-flex-direction: column;
        }
        
        .section_parent:nth-child(odd) .section.left,
        .section_parent:nth-child(even) .section.left {
            order: 1;
            -webkit-order: 1; 
            -moz-order: 1;
            -ms-order: 1;
            -o-order: 1;
        }
        
        .section_parent:nth-child(odd) .section.right,
        .section_parent:nth-child(even) .section.right {
            order: 2;
            -webkit-order:2; 
            -moz-order: 2;
            -ms-order: 2;
            -o-order: 2;
        }

    }
</style>

In that example I have parent containing two sections, left and right. I apply "display:flex" and "flex-direction: row" to the inner most container of the sections. The sections I make "flex: 1" to make them equal widths, and then I give me alternating orders appearance using ":nth-child(odd)" and ":nth-child(even)".

 

In the media query I change the parent's "flex-direction" to "column" and I straighten out my section orders.

 

You can apply this directly to Hubspots drag and drop html but the parent is going to be the ".row-fluid" container directly wrapping the "span#" (span1-12) classed elements you are trying to switch the order of. the ".section.right" and ".section.left" in this case would be the span class elements in the ".row-fluid" conrtainer. If the section is equally halved then both sections would be ".span6" which means that you will need to repaced "section.right" with and ".span6:first-of-type" annd "section.left" with ".span6:last-of-type".

View solution in original post

3 Replies 3
Jsum
Solution
Key Advisor

Images/text for landing page wont remain responsive

SOLVE

@randymalmquist,

 

You have alternating sections and on mobile they are stacking wrong?

 

What @Phil_Vallender says is correct. The browser pulls elements to the the top and left and right elements stack under left. 

 

I see this alot though and I have, what is for me, a simple fix. It involves using flexbox, which is some fancy structural css that isn't completely supported so needs browser prefixes on it's css attributes so it looks more complicated than it is.

 

<div class="section_parent">
    <div class="section left">

    </div>
    <div class="section right">

    </div>
</div>

<div class="section_parent">
    <div class="section left">

    </div>
    <div class="section right">

    </div>
</div>


<style>
  .section_parent {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
    }

    .section {
         flex: 1;
         -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        height: 200px;
     }
     
     .section_parent .section.right {
       background: red;       
     }
     
     .section_parent .section.left {
       background: blue;       
     }
     
     .section_parent:nth-child(odd) .section.right,
     .section_parent:nth-child(even) .section.left {
          order: 2;
          -webkit-order: 2; 
          -moz-order: 2;
          -ms-order: 2;
          -o-order: 2;
      }
      
      .section_parent:nth-child(even) .section.right,
      .section_parent:nth-child(odd) .section.left {
          order: 1;
          -webkit-order: 1; 
          -moz-order: 1;
          -ms-order: 1;
          -o-order: 1;
      }

     @media (max-width: 768px) {
       
        .section_parent { 
             flex-direction: column;
             -webkit-flex-direction: column;
             -moz-flex-direction: column;
             -ms-flex-direction:column;
             -o-flex-direction: column;
        }
        
        .section_parent:nth-child(odd) .section.left,
        .section_parent:nth-child(even) .section.left {
            order: 1;
            -webkit-order: 1; 
            -moz-order: 1;
            -ms-order: 1;
            -o-order: 1;
        }
        
        .section_parent:nth-child(odd) .section.right,
        .section_parent:nth-child(even) .section.right {
            order: 2;
            -webkit-order:2; 
            -moz-order: 2;
            -ms-order: 2;
            -o-order: 2;
        }

    }
</style>

In that example I have parent containing two sections, left and right. I apply "display:flex" and "flex-direction: row" to the inner most container of the sections. The sections I make "flex: 1" to make them equal widths, and then I give me alternating orders appearance using ":nth-child(odd)" and ":nth-child(even)".

 

In the media query I change the parent's "flex-direction" to "column" and I straighten out my section orders.

 

You can apply this directly to Hubspots drag and drop html but the parent is going to be the ".row-fluid" container directly wrapping the "span#" (span1-12) classed elements you are trying to switch the order of. the ".section.right" and ".section.left" in this case would be the span class elements in the ".row-fluid" conrtainer. If the section is equally halved then both sections would be ".span6" which means that you will need to repaced "section.right" with and ".span6:first-of-type" annd "section.left" with ".span6:last-of-type".

randymalmquist
Member

Images/text for landing page wont remain responsive

SOLVE

thanks guys, we got it taken care of

0 Upvotes
Phil_Vallender
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Images/text for landing page wont remain responsive

SOLVE

Hi @randymalmquist

 

If I've understood my developers correctly, the default responsivity of HubSpot is always to move the right hand element below the left hand one when reaching a break point. 

 

If you want to reverse that response, and have the right hand element stay on top of the left hand one, I believe it requires some custom CSS. 


Perhaps @Jsum can confirm? 

 

Hope this helps.

Phil Vallender | HubSpot Website Agency
0 Upvotes