-
Posts
-
How do I remove the padding and margin from my column content? I want the content to fill the whole column width, so it’s touching the edge of the site container.
I want it to look like this page below the navigation: http://thefreelifequote.com/ – the image of the family is filling up the column on the left, and the red background is filling up the form on the right.Hi goforyourdreams!
Thank you for using Enfold.
Please insert a Color Section then place the first 2/3 and 1/3 column inside. Apply a unique id on the For Developers: Section ID field. Use this on Quick CSS or custom.css:
#full-width-section .container { width: 100%; max-width: none !important; padding: 0; }Best regards,
IsmaelThank you so much for your help! I now set it up as you suggested as a color section with 2 columns, and added the code. It’s starting to look closer to what I want it to be, but there is still padding on top and bottom of picture – how do I remove it?
Here’s the code:
#full-width-section-tflq .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }Note that I added !important to everything and also added the margin: 0, which made it correct on the left side… but don’t know how to remove padding on top and bottom.
Hey!
Thank you for the update. Glad it works. Add this code:
#full-width-section-tflq .content { padding: 0; } #top #full-width-section-tflq form { margin-bottom: 0; }Cheers!
IsmaelThank you! Now the image in the left column looks like it should, but the form on the right is glued to the top. Also, on mobile the form doesn’t have any space on the left.
How can I remove the padding just for the image and not for the form?
Hi!
Use this to adjust the margin of the last column:
#full-width-section-tflq .flex_column.av_one_third.avia-builder-el-3.el_after_av_two_third.avia-builder-el-last { margin-left: 3%; margin-top: 30px; }If possible, look for google inspector or firebug tutorials. It will save you a lot of time.
Cheers!
IsmaelAwesome, thanks! Now the desktop version looks perfect.
How do I make changes to the responsive version? When I resize the screen to mobile size, the left margin of the column with the form is zero again. What CSS targets the mobile version?
Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 768px) { div#full-width-section-tflq .container { margin-left: 3%!important; margin-top: 30px!important; }}Cheers!
YigitThank you! I changed it to the following to only target the right column as opposed to the whole container, and it worked great:
@media only screen and (max-width: 768px) { div#full-width-section-tflq .flex_column.av_one_third.avia-builder-el-3.el_after_av_two_third.avia-builder-el-last { margin-left: 3%!important; margin-top: 30px!important; }}Last question about this page:
When I resize the browser to tablet size and the 2 column breaks into one column below another, the image in the left column doesn’t fill the whole width and there is an ugly gap on the right (see screenshot):
http://yourwebsiteasap.com/tflq/screenshot2.png (username testing, password testing123)How do I make the image fill the whole width when browser is tablet size? I want it to look the same way it does in smaller mobile size.
Hi!
Use this:
@media only screen and (max-width: 768px) { div#full-width-section-tflq .avia-image-container-inner img { width: 100%; margin: 0; padding: 0; } }Please visit Envato Studio or Werkpress for further customization.
Best regards,
IsmaelUnfortunately this code didn’t work. I added !important and still nothing… The image doesn’t fill the width on tablet size, plus now the right margin space started appearing on mobile.
Any ideas? Thank you so much for all your help!
Hey!
Remove
width: 100% !importantfrom the code.
This will resolve the image resizing issue for smaller screen sizes.
For non-conventional screen sizes, I would suggest using the following media query to modify your css:
@media only screen and (min-width:644px) and (max-width:767px) { /* CSS rules here */ }The image does not resize correctly between the two sizes above. As I said, these are non-conventional screen sizes and if you want to handle the css for the image, I would suggest the following:
@media only screen and (min-width:644px) and (max-width:767px) { /* CSS rules here */ div#full-width-section-tflq .avia-image-container{ max-width:627px !important; margin: 30px auto !important; float:none; } }Best regards,
ArvishThank you! I used the code, and it centers the image (which makes it look better than before), but the image doesn’t stretch to fill the whole width. I tried increasing the max-width to 767px but it did nothing. How do I make the image stretch to fill the whole width of 767px?
Hi!
Please try adding following code to Quick CSS
@media only screen and (min-width:644px) and (max-width:767px) { /* CSS rules here */ div#full-width-section-tflq .avia-image-container{ max-width:100% !important; width: 100% !important; margin: 30px auto !important; float:none; } }If you would like to display your image fullwidth like color section element, please add a color section element with unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
and then insert your image inside your color section and then add following code to Quick CSS@media only scree and (max-width: 768px) { #your-custom-id .container { width: 100%; margin: 0; }}Cheers!
Yigit
- You must be logged in to reply to this topic.