removing space between columns

  • removing space between columns
    Viewing 12 posts - 1 through 12 (of 12 total)

  • Cedric
    Participant
    #7028

    Hi Omar,

    I hope you are fine.

    I am building a page with 2 columns.

    I’d like to stick the 2 columns together without any space between. How can I do that please ?

    Many thanks

    Cédric


    Omar
    Keymaster
    #7033

    Hello Cedric,

    I am doing great, hope you are too!

    Depending on the columns and page settings.
    Can you share the page link with me?

    Cheers


    Cedric
    Participant
    #7037
    This reply has been marked as private.

    Omar
    Keymaster
    #7038

    Hey Cedric,

    Add the following to the Custom CSS

    @media (min-width: 767px){
    .page-id-3679 #aq-block-4{
    padding-right: 10px;
    background: url('http://www.webgeoservices.com/wp-content/uploads/2015/12/graph-600px.jpg');
    background-position: right -209px;
    }
    .page-id-3679 #aq-block-5, .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    margin-left: 0;
    padding-right: 10px;
    background-color: white;
    }
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 5px;
    }
    }
    @media (min-width: 980px){
    .page-id-3679 #aq-block-4{
    background-position: right -118px;
    }
    }
    @media (min-width: 1200px){
    .page-id-3679 #aq-block-4{
    padding-right: 15px;
    background-position: right -25.6px;
    }
    .page-id-3679 #aq-block-5, .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    padding-right: 15px;
    }
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 7px;
    }
    }

    The map block will not be absolutely perfect, but I’ll think of a solution for it
    I’ll check the other page and let you know.

    Cheers


    Cedric
    Participant
    #7141

    Hi Omar,

    Just coming back from Xmas break.First thing first, I wish you a happy new year to you and your family.

    Thank you Omar for this. It works nicely.

    Can you please tell me when are planning to add the feature to add HTML?

    Many thanks

    Cheers

    Cédric


    Cedric
    Participant
    #7146
    This reply has been marked as private.

    Omar
    Keymaster
    #7158

    Hey Cedric,

    Replace the old code with this one

    @media (min-width: 767px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    padding-right: 10px;
    background-position: right -209px;
    background: white;
    }
    .page-id-3679 #aq-block-4{
    background: url('http://www.webgeoservices.com/wp-content/uploads/2015/12/graph-600px.jpg');
    }
    .page-id-3679 #aq-block-5,.page-id-3692 #aq-block-5, .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    margin-left: 0;
    padding-right: 20px;
    background-color: white;
    }
    .page-id-3692 #aq-block-5{
    background-color: rgb(255, 235, 194);
    }
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 5px;
    }
    }
    @media (min-width: 980px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    background-position: right -118px;
    }
    }
    @media (min-width: 1200px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    padding-right: 15px;
    background-position: right -25.6px;
    }
    .page-id-3679 #aq-block-5, .page-id-3692 #aq-block-5, .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    padding-right: 30px;
    }
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 7px;
    }
    }

    That should do.

    Waiting for your feedback 🙂

    Cheers


    Cedric
    Participant
    #7172
    This reply has been marked as private.

    Amr Essam
    Keymaster
    #7178

    Hello Cedric,

    Please replace the previous code with the following:

    
    @media (min-width: 767px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    padding-right: 10px;
    background-position: right -209px;
    background: white;
    }
    .page-id-3679 #aq-block-4{
    background: url('http://www.webgeoservices.com/wp-content/uploads/2015/12/graph-600px.jpg');
    }
    .page-id-3679 #aq-block-5,.page-id-3692 #aq-block-5, .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    margin-left: 0;
    padding-right: 20px;
    background-color: white;
    }
    .page-id-3692 #aq-block-5{
    background-color: rgb(255, 235, 194);
    }
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 5px;
    }
    }
    @media (min-width: 980px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    background-position: right -118px;
    }
    }
    @media (min-width: 1200px){
    .page-id-3679 #aq-block-4, .page-id-3692 #aq-block-4{
    padding-right: 15px;
    background-position: right -25.6px;
    }
    .page-id-3692 #aq-block-5{
    padding-right: 30px;
    }
    .page-id-3679 #aq-block-5 , .page-id-3679 #aq-block-7, .page-id-3679 #aq-block-8{
    padding-right: 15px;
    } 
    .page-id-3679 #aq-block-8 .rev_slider_wrapper{
    margin: 0 7px;
    }
    }
    

    I tried it for both pages and it worked fine. Let me know if you have any further problem.
    Cheers


    Cedric
    Participant
    #7193

    Hi Amr,

    Thank you for your help, this is much better. That said, on mobile (iOS) we can see the table border in grey in the left hand side of the screen.

    For the moment, it is OK, but being able to edit HTML would help a lot.

    Have a nice day,

    Cédric


    Amr Essam
    Keymaster
    #7198

    Hello Cedric,

    If you want to insert HTML code within the page builder, you can use the Shortcode block. It renders the html code normally.

    Try it and let me know if you had any question.

    Cheers


    Cedric
    Participant
    #7199

    Hey Amr,

    Thank you for this tip, I didn’t know we could use Shortcode block to insert HTML code.

    Will try this when I can.

    Thanks

    Cheers

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘removing space between columns’ is closed to new replies.