Remove Padding using Section ID


#1

Hello. I have a series of widgets (using the image widget) that I would like to remove the padding from the left, right and top from. My goal is to have thee images fill the entire 1/2 width. Can you please share with me the .css to do this using the SECTION ID function. Here is what I tried:

.bike-image-id {
padding-left: 0;
    padding-right: 0;
	top-padding:0;
}

Pleaase find a link to an image of what I am seeing: http://carivino.com/wp-content/uploads/2019/01/Customize_-Homepage-–-CARIVINO-Google-Chrome-2019-01-16-18.37.39.png


#2

Hello,

I’ve just checked your website and it looks like you have already resolved this issue, is it correct?

Kind Regards, Roman.


#3

Hello Roman,
Thank you for your response. I did a quick work around so I could publish the site. I simply set the images as background images (on 3 of them). Unfortunately they do not view on mobile devices. Is there a way to make the background images preview on small devices?
And, if not can you provide instruction for my previous request? Much appreciated.


#4

Hello,

Try to use the following CSS code (it will also move second image below text for proper layout). You can add CSS code in Customize → Additional CSS section.

@media (max-width: 991px) {
    section#bike {
        height: 100vw;
    }

    section#text-25,
    section#text-26 {
        height: 50vw;
    }

    .multicolumn-row {
        display: table;
    }

    section#text-14 {
        display: table-header-group;
    }

    section#text-14 .atblock.container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Thank you very much this was the perfect solution!


#6

Great, you are welcome!

And have a nice day :slight_smile:

Kind Regards, Roman.


closed #7