-
Posts
-
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
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
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
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
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
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
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
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
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.
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
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
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
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;
}
- The topic ‘Remove padding in sections so images are flush on bottom of section’ is closed to new replies.