Docs

[Sara H.]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Cornerstone > Settings > Custom CSS

@media (max-width: 979px) {
.x-section .x-column {
    width:100% !important;
    float:none;
    display:block;
    margin-right:0 !important;    
}
}

Hope that helps.

[Sara H.]

This reply has been marked as private.

[Paul R]

Hi,

To make it 2 columns on LG and MD.

Please add this in Cornerstone > Settings > Custom CSS

@media only screen and (min-width: 701px) and (max-width: 1400px) {

#x-section-1 .x-column {
    width:46% !important;   
    margin-right:4%;    
}

#x-section-1 .x-column:(2n+2) {
   margin-right:0 !important;    
}
}

Hope that helps.

[Sara H.]

Hi.

First I dont see any custom css at the seetings of cornerstone, I suppose its at Appearance > Customize > Costum > edit global css Am I wrong?

I added the code you gave me and did nothing it looks there was no changes..

[Sara H.]

Hi again

I understand now how to go to Cornerstone > Settings > Custom CSS
I did put the code there and the result was the same.

[Rad]

Hi there,

I’d like to check it but looks like the login credentials are no longer valid. Would you mind providing the latest password?

Thanks!

[Sara H.]

This reply has been marked as private.

[Christopher]

Hi there,

I just implemented the solution I provided in previous replay in a draft page (http://www.rpparadise.com/?page_id=523&cornerstone=1) and it worked. You can import this page template to ‘algarve fishing experiences’ page.

Please check it.

Hope it helps.

[Sara H.]

Hi again,

I can see that you add this code at the custom css:

#test .x-column.x-1-3 {
    width: 28.66666%;
}

@media only screen and (min-width: 701px) and (max-width: 979px) {
#test .x-column {
    width:46% !important;   
    margin-right:4% !important; 
  float:left;
}
}

I also understand that you add a text block with all that divs to test if the column breaks are doing well, which they are!

so I saved a template of ‘algarve fishing experiences’ page and added in the page you implemented as draft page.

If you see the responsive in that page (x-support) the layout still broken, there you can see the last 2 services are alone align on the right. So i guess I still have a problem here.

And there is another issue with my 4 column row that is turning to 2 column a bit late (please see the attachment file).

The code that I have in my custom css relate to responsive breaks is:

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .cs-content .x-column.x-1-4,
  .cs-content .x-column.x-1-3 {
    margin-right: 2%;
    width: 48%;
  }
 .page-id-4 h3.h-custom-headline {
    font-size: 19px;
}
  .cs-content .x-column.x-1-3 {
    margin-bottom: 2%;
  }
  .cs-content .x-column.x-1-3:nth-child(2n) {
    margin-right: 0;
  }

plus the code you added in custom css at cornerstone.

[Rad]

This reply has been marked as private.

[Author]

Posts