
-
AuthorPosts
-
June 14, 2022 at 6:09 pm #1355226
Hi there,
We would like to add a 15% margin or padding on the left and on the right of all pages of our website, but ONLY ON THE CONTENT AREA, not on the header (menu) nor on the footer.
Is there a way to do this with CSS maybe? So the width of the header and footer would be 100% but the width of the content only 70%.
Here is an example of what we have: https://www.edunao.com/solutions/
Here is an example of what we would like to have: https://www.edunao.com/lms/
Thank you and Kind regards,
Olivier
-
This topic was modified 2 years, 9 months ago by
antoine34.
June 15, 2022 at 9:36 am #1355288Hey antoine34,
Please try this in Quick CSS:
.av-logo-container, #footer .container { width: 100%; max-width: 100%; }
You can set the general width of the container under Enfold->General Layout->Dimensions.
Best regards,
RikardJune 15, 2022 at 6:29 pm #1355374Hey Rikard,
I have pasted the code in Quick CSS after this in Enfold->General Layout->Dimensions I have settled the width of Content+Bar at 70% dut it doesn’t work.
I also tried to reduce by 30% the maximum width of the contener in px but it doesn’t work.
Any other idea?
I don’t know if this can help but I copy/paste just below all the lines of the Quick CSS window:
.av-logo-container, #footer .container {
width: 100%;
max-width: 100%;
}.sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
font-weight: bold!important;
font-size: 15px!important;
}#top .av-tab-arrow-container span { background: #059ed1!important; }
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text { padding-left:20px; padding-right:20px; }
.av-masonry-date {
display: none!important;
}/*—————————————-
// CSS – Styling contact form 7
//————————————–*//* Textarea email and input fields */
#top .wpcf7-form input[type=’text’],
#top .wpcf7-form input[type=’email’],
#top .wpcf7-form .wpcf7-textarea {
/*border-color: #d0d2d3;*/
/*background: #dbebfa;*/
/*color: #00334e;*/
font-family: “HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1em;
padding: 13px!important;
border-radius: 2px;
}/* Submit button */
#top .wpcf7-form .wpcf7-submit {
padding: 15px 30px;
border-radius: 2px;
}Thank you so much for your help,
Kind regards,
Olivier
June 15, 2022 at 8:22 pm #1355393Hi,
Please try this instead:
.av-logo-container, #footer .container { width: 100% !important; max-width: 100% !important; }
Best regards,
RikardJune 16, 2022 at 6:04 pm #1355532Hi Rikard,
Sorry but it still doesn’t work, the width of the main content is still 100% even if I have settled it at 70% in Enfold->General Layout->Dimensions.
Any other idea to fix this?
Thank you so much,
Kind regards,
Olivier
June 17, 2022 at 9:54 am #1355564Hi,
Your container width is set to 1310 pixels:
.responsive .container { max-width: 1310px; }
So I’m not sure I understand what you mean. Could you try to explain the problem a bit further?
Best regards,
RikardJune 17, 2022 at 6:22 pm #1355632Hi,
Thank you for your answer.
We want to keep the width of the header (menu bar) and the width of the footer to 100% (1310px).
And we want to set the width of the main content of the pages (the body) to 70% (917px).
Is it more understandable for you?
Thank you so much,
Best regards,
Olivier
June 18, 2022 at 10:24 am #1355671Hi,
Then it’s better if you set the smaller pixel value in the theme option, and use custom CSS for the header and footer:
.av-logo-container, #footer .container { width: 1310px; max-width: 1310px; }
Best regards,
RikardJune 18, 2022 at 12:13 pm #1355683Hi Rikard,
Thank you very much, I have pasted your code in the Qucik CSS and settled the maximum width of the site at 917px in Enfold->General Layout->Dimensions, but it still doesn’t work… :-(
Any other idea?
Thank you so much,
Best regards,
Olivier
June 18, 2022 at 7:06 pm #1355705Hi,
I still see this container width:
.responsive .container { max-width: 1310px; }
Make sure that you have activate the option to delete the old CSS and JS files under Enfold->Performance.
Best regards,
RikardJune 19, 2022 at 6:54 pm #1355771Hi,
Thank you very much, I have activated the option to delete the old CSS and JS files under Enfold->Performance (It was not activated) but I cannot see any changes, even after saving again the last changes we had done together on Qucik CSS.
Any other idea?
Tanks again,
Best regards,
Olivier
June 19, 2022 at 10:10 pm #1355786Hi,
Thank you for your patience, is this how you wanted it?
Please try this css in the WordPress ▸ Customize ▸ Additional CSS field:.responsive #main .container, #main .avia-section { max-width: 917px; width: 917px; margin: auto; float: none; } #main .container_wrap { border-top-style: none; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJune 20, 2022 at 7:50 pm #1355874Hi Rikard,
Thank you very much and yes, that is exactly how I want it.
I have pasted your CSS in the WordPress ▸ Customize ▸ Additional CSS field and it works!!!
Bravo!
The only last issue is that now even the sections in which we have activated a width in full screen are now limited to a width of 917 px.
Is there a way to create an exception in the CSS to keep this sections in full screen width?
Thank you so much,
Olivier
June 20, 2022 at 8:03 pm #1355878Sorry, maybe my answer is not clear enough.
What I want to keep in fullscreen with are the backgrounds of the sections, when they are set to be in full screen width in Enfold.
Best regards,
Olivier
June 20, 2022 at 11:25 pm #1355908Hi,
In my screenshot above the blue section “Solutions” is fullwidth and the top image “LMS” is also fullwidth, so if you want these section to remain fullwidth use this css instead:.responsive #main .container { max-width: 917px; width: 917px; margin: auto; float: none; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJune 21, 2022 at 3:11 am #1355915Hi Rikard,
Thank you very much: it works!!!
The only issue remainaing is on the footer which is now in 917px width instead of being in 1310px like the header.
Can you check on your side?
Thanks again and best regards,
Olivier
June 21, 2022 at 9:16 am #1355955Hi,
Please try this CSS instead:
.av-logo-container, #footer .container { width: 1310px !important; max-width: 1310px !important; }
Best regards,
RikardJune 21, 2022 at 1:09 pm #1356004Hi Rikard,
I tried this instead and it didn’t work: the width of all the page is 1310 px again.
So I tried to do both, and not insted, and it seems to work:
.responsive #main .container {
max-width: 917px;
width: 917px;
margin: auto;
float: none;
}.av-logo-container, #footer .container {
width: 1310px !important;
max-width: 1310px !important;
}Can you check on you side?
Thank you so much again!
Best regards,
Olivier
June 21, 2022 at 4:19 pm #1356020Hi,
That’s not what I’m seeing, it looks correct on my end. Please try clearing your browser cache and reload, or load the site in an incognito or private browser window.
Best regards,
RikardJune 21, 2022 at 5:44 pm #1356032Hi Rikard,
It looks OK on my end too, that’s what I wrote you in my former message, so if it looks OK on your end too, everything is perfect!
Thank you so much, it works!
Best regards,
Olivier
June 21, 2022 at 6:39 pm #1356038Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
This topic was modified 2 years, 9 months ago by
-
AuthorPosts
- The topic ‘How to add margins (or padding) on the left and right sides of the content only’ is closed to new replies.