-
Posts
-
Hi, thanks again for the best theme and support ever. I have a responsive site and want to make color sections have some space around it, like 80% of the responsive width. I can’t figure out how to do this. I don’t want to use a boxed layout, I just want to make a color section and its content to be 80% and centered while everything else remains full width.
Hope you can help :)
Thanks /Michael
Hi,
I had a similar question. Part of the answer is here: https://kriesi.at/support/topic/custom-width-color-section/ but this code does not center the color section. Still waiting for the answer.
M.
Hi @musklick!
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
RikardHi!
Thank you for using Enfold.
Replace the code with this:
#customID { max-width: 50% !important; position: relative; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); }Regards,
IsmaelHi, thanks for your replies. Link to the site is http://sabinerosen.se/wp-admin/ You have to log in to see it. Username: guest Password: guest
Let me know if you need admin password and I will provide it. Ismael, I tried putting the code you supplied in the custom CSS and gave one of the sections the same ID but I can’t see any results. This is a screenshot of what it looks like:
And this is the effect that I would like to achieve.
Please let me know if I’m thinking in the wrong direction and making a simple issue complicated. Looking forward to your replies. Thanks again.
/MichaelHi!
I couldn’t see if you had put the CSS Ismael gave you in Quick CSS since you didn’t give the account admin rights, no problem though since we don’t need it at the moment. Did you make sure that you adjusted his code to your own section id’s to see if it works, for instance:
#av_section_7 { max-width: 50% !important; position: relative; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); }To target the section under SABINEMETHOD.
Best regards,
RikardHi again, I changed Ismael’s code to .customID instead of #customID and got some results. However not quite the look I’m after, but it might be the right way with some more adjustments. And with the page background visible on the sides, like in the scrrenshot.
Looking forward to your replies. Thanks again.
/MichaelHi!
Ok great, what section did you apply the CSS to so that we can review the changes needed?
Best regards,
RikardHi Rikard, I tried your suggestion and it works in changing the width of that section but it is still a full width white section and the content inside is 50%. I put Ismael’s code on “Vad väntar du på?” and your code on “Sabinemethod”
Looking forward to your replies. Thanks again.
/MichaelHi!
You can try this in the Quick CSS field:
.home #wrap_all { background: #ffffff url(//media.sabinerosen.se/2015/03/snow-bg-3.jpg) top left repeat scroll; } .home .main_color.container_wrap, .home div#main { background-color: transparent; } div#testimonials, #boka, #sabinemethod, #om, #sabinemethod + div { max-width: 90% !important; position: relative; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); }Best regards,
IsmaelHi, and thank you Ismael! This works, but I’m confused over how I shall complete the code so it affects all sections.
div#testimonials, #boka, #sabinemethod, #om, #sabinemethod + div {
Does the last ID include the following sub section by using +div?
To include the next section shall I use #friskvard? or #friskvard + div?My problem is now that I try different variations of the code (without really knowing what I’m doing) and I either get the next section to work but the subsection is not included or the subsection on the previous stops working. I really hope you can explain this so I’ll understand it, then I won’t have to ask you next time ;-)
Looking forward to your replies. Thanks again.
/MichaelHey!
This line of code:
#sabinemethod + divmeans “apply to the first div which is a sibling to #sabinemethod”. You should be able to target your other sections by just using their ID’s. Please let us know if should not be able to work it out yourself and we’ll help you out.
Cheers!
RikardHey Rikard, thanks for your reply. I’m having a bit of a problem to get it right. If I for instance put
#friskvard + div
it affects the sibling but not the color section friskvard, and if I put
#friskvard, #friskvard + div
or just
#friskvard
It affects the color section but not the sibling. I must be missing something. Hope you can help.
Thanks again /MichaelHey!
It looks like you managed to fix it, right? The only sections I can see now not looking like the others are #naring and #kontakt, do you need any more help?
Cheers!
RikardHey Rikard, I think I have figured it out now. Thanks for your help. One question, what makes a section a sibling? And not the following? Is it because it has no ID?
Thanks again /Michael
Hi Michael!
Very good question, I’m actually not sure what exactly makes an element a sibling or a child. But I can give you a general tip when working with sections with ID’s, in almost all cases you won’t need to use selectors like the + in the code we gave you. As long as you have the ID of the sections you can target most elements quite easily, like this example:
#section-1 .container { /*This code will target elements with the class container inside of section-1*/ }Regards,
Rikard
- You must be logged in to reply to this topic.