Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #25420

    Hi, how do I remove the extra padding on bottom of each section in the color section of avia framework? I want some images to be flush on bottom of section but even when I select no padding in the color section it still adds some. Let me know what code to edit or add to custom css please.

    Thanks much

    #126911

    This may also be issue with adding padding around images so images aren’t able to line up flush to bottom of section? Let me know.

    Thanks,

    Chris

    #126912

    Hi Chris,

    It should be doable by targeting the specific items. If you can provide a link to your site we can inspect the code that you have now and get the basic structure for you as an example.

    Regards,

    Devin

    #126913

    Hi Devin, how do I send you a pm? I have site under construction but I can put in your IP so you can view past the underconstruction page.

    Thanks much

    #126914

    Hi,

    I think it is cause by the .content selector. You can decrease the padding on your custom.css or Quick CSS

    .content {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    Regards,

    Ismael

    #126915

    Hi Ismael, that didn’t do it unfortunately. For some reason when I do 2 columns and use image animation it lines image in second column up flush to bottom. When I do 1 column and image animation to full size image it has about a 20px gap under image (not flush to bottom). Then also when I resize for mobile / tablet it adds a large padding under both image sections. Let me know if there is a way to private message you and I can get you access to site to see what is going on.

    Thanks much,

    Chris

    #126916

    Hi Chris,

    We don’t have private messages available but you can shoot me an email with the information.

    You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn’t grab it :)

    Regards,

    Devin

    #126917

    Thanks Devin, just sent you an email.

    Thanks much,

    Chris

    #126918

    Hi Devin, just wanted to make sure you got my email on the section padding on mobile / responsive layout. I got the images flush to bottom on desktop devices but the mobile side adds about 30px extra padding on bottom of each section which forces images up. Could you let me know what code to edit to remove the additional padding that is added to sections on mobile devices?

    Thanks much,

    Chris

    #126919

    No I didn’t receive anything. Make sure to include a link to this topic in the body of the message or my spam filter grabs it and I can’t see it.

    #126920

    Hi Devin, I emailed again yesterday. Basically I just need to know how to remove bottom padding of sections in mobile devices because it keeps adding about 30 px to top and bottom of padding in mobile / responsive layout. This is crucial to get this resolved quickly as site is ready to go live soon.

    Thanks much

    #126921

    Just saw your email now. Even if the padding is removed the iphone images are too small to actually extend the full height of the color section which is the issue I think you are trying to solve (at least on tablets they are).

    On mobile, you could use:

    #top .flex_column.av_one_half.avia-builder-el-12.el_after_av_one_half.avia-builder-el-last {
    margin-bottom: 0;
    }
    #top #av_section_2 .template-page.content.twelve.alpha.units {
    margin-bottom: 0;
    }

    And put it inside the media query in the custom.css file for mobile only.

    Regards,

    Devin

    #126922

    Thanks Devin, that resolved it for the 2 column layout. For some reason the 1 column image on top is still adding the padding to it. Could you check that?

    Thanks much,

    Chris

    #126923

    Very similar except target the different div:

    #top .flex_column.av_one_full.first.avia-builder-el-4.el_after_av_one_full.avia-builder-el-last.column-top-margin {
    margin-bottom: 0;
    }

    #top #av_section_1 .template-page.content.twelve.alpha.units {
    margin-bottom: 0;
    }

    #126924

    Beautiful, that did it. Thanks again, I really appreciate you guys’ support.

    Thanks much,

    Chris

    #126925

    Glad we could help :)

    Let us know if you have any other questions or issues.

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

The topic ‘Remove padding in sections so images are flush on bottom of section’ is closed to new replies.