Docs

[Ony]

Hello, in the following reply will contain the website information.

On my homepage there is a white space to the left of one of the columns. I was wanting to fix this space and have the two marginless-columns to span the whole page. It would need to be responsive.

Any help would be extremely appreciated!

Thanks for the great support,
Ony

[Ony]

This reply has been marked as private.

[Ony]

This reply has been marked as private.

[Lely]

Hello Ony,

That white space is because of this custom CSS:

#column1, #column2 {
    float: right !important;
    cursor: pointer;
}

If you want it to be 100%, please go to ROW > Inspect element > Set COLUMN CONTAINER TO OFF. Then remove this line float: right !important; from above CSS.

Hope this helps.

[Ony]

Hi Lely,

Thanks for the quick reply!

I’ve made the requested changes; although, the columns were simply flipped and the white space now appears on the right-hand side.

Best,
Ony

[Christopher]

Hi there,

Please enable ‘Marginless columns’ option from row settings.

Thanks.

[Ony]

Marginless columns unfortunately causes it to malfunction as well. (It looks fine in cornerstone but when live it is not functioning properly.)

I have enabled it so you can see the settings, and also have attached a screenshot.

This has been a problem that I’ve been trying to fix for weeks now, sadly :(, and none of the current forum support topics properly identify or fix the problem.

Login credentials are available in a reply above if you’d like to test or inspect further. (If you do find a fix, please feel free to implement it and let me know what the issue was, it’s been causing me grief for some time now.)

[Ony]

This reply has been marked as private.

[Thai]

Hi Ony,

Please add the following CSS:

.home #x-section-2 .x-container > a {
    float: left;
    width: 50%;
}
.home #x-section-2 .x-container > a > .x-column {
    width: 100% !important;
    display: block !important;
    float: left !important;
}
@media (max-width: 767px){
    .home #x-section-2 .x-container > a {
        width: 100%;
    }  
}

http://i.imgur.com/lbdlcc7.png

Hope it helps 🙂

[Ony]

Once again, the X team to the rescue!

Thanks guys, worked beautifully.

[Joao]

Great to hear it.

Let us know if you need further help.

Joao

[Ony]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating this thread! To resolve this issue, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.page-id-7278 #x-section-1 .x-container > a {
    float: left;
    width: 25%;
}

.page-id-7278 #x-section-1 .x-container > a > .x-column {
    width: 100% !important;
    display: block !important;
    float: left !important;
}

@media (max-width: 767px){
    .page-id-7278 #x-section-1 .x-container > a {
        width: 100%;
    }  
}

Hope this helps. Please let us know how it goes.

[Ony]

This reply has been marked as private.

[Rad]

Hi there,

When you wrap your columns with link, make sure x-column is added as well, and not just x-1-2. And make sure the inner column becomes x-1-1.

  (function($){
  // column 1 - Club Button Homepage
  $('<a id="link1" href="http://reubenmann.ca/zoo/club">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2 - Lounge Button Homepage
  $('<a id="link2" href="http://reubenmann.ca/zoo/lounge">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

  // column 3 - Monday Button Events Page
  $('<a id="link3" href="http://reubenmann.ca/zoo/event/tequila-mondays/">').insertBefore('#linked-column-3');
  $('#linked-column-3').prependTo( $('#link3') );

  // column 4 - Tuesday Button Events Page
  $('<a id="link4" href="http://reubenmann.ca/zoo/event/drafttuesdays/">').insertBefore('#linked-column-4');
  $('#linked-column-4').prependTo( $('#link4') );

  // column 5 - Wednesday Button Events Page
  $('<a id="link5" href="http://reubenmann.ca/zoo/event/doublewednesdays/">').insertBefore('#linked-column-5');
  $('#linked-column-5').prependTo( $('#link5') );

  // column 6 - Thursday Button Events Page
  $('<a id="link6" href="http://reubenmann.ca/zoo/event/twosomethursdays/">').insertBefore('#linked-column-6');
  $('#linked-column-6').prependTo( $('#link6') );

  // column 7 - Friday Button Events Page
  $('<a id="link7" href="http://reubenmann.ca/zoo/event/live-fridays/">').insertBefore('#linked-column-7');
  $('#linked-column-7').prependTo( $('#link7') );

  // column 8 - Saturday Button Events Page
  $('<a id="link8" href="http://reubenmann.ca/zoo/event/sin-saturdays/">').insertBefore('#linked-column-8');
  $('#linked-column-8').prependTo( $('#link8') );

  // column 9 - Sunday Button Events Page
  $('<a id="link9" href="http://reubenmann.ca/zoo/event/industry-sunday/">').insertBefore('#linked-column-9');
  $('#linked-column-9').prependTo( $('#link9') );

  //.... and more...
})(jQuery);

(function($){
	$( "#column1" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/club' target='_blank'></a>" );
	$( "#column2" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/lounge' target='_blank'></a>" );
	$( "#column3" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/tequila-mondays' target='_blank'></a>" );
	$( "#column4" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/drafttuesdays' target='_blank'></a>" );
	$( "#column5" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/doublewednesdays' target='_blank'></a>" );
	$( "#column6" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/twosomethursdays' target='_blank'></a>" );
	$( "#column7" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/live-fridays/' target='_blank'></a>" );
	$( "#column8" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/sin-saturdays/' target='_blank'></a>" );
	$( "#column9" ).wrap( "<a class='x-1-2 x-column' href='http://reubenmann.ca/zoo/event/industry-sunday/' target='_blank'></a>" );

  $( ".x-column > .x-column" ).removeClass('x-column x-sm x-1-2 x-1-4');
  
  //.... and more...
})(jQuery);    

The explanation is, your wrapper (links) are now become the column, hence, adding another column within it will divide the columns in two fold.

Hope this helps.

[Author]

Posts