-
Posts
-
I’ve read some threads on this issue and have added this CSS class to the color section that I need to be full width:
#bookTours .container {
width: 100%;
}
It didn’t correct the issue and it doesn’t look like the CSS I am adding to the style.css file in my child theme. I noticed some other CSS that may be restricting what I am trying to do so I added this:
#bookTours .avia-section .container {
width: 100% !important;
padding: 0 !important;
}
This still doesn’t make the content full width. Using the visual inspector, I can turn off different elements that effect the width and get the results I am looking for, but it doesn’t seem like anything is working.Can you take a look and let me know if I am missing something or editing the wrong file? Adding the different CSS to the Quick CSS doesn’t do anything for me either.
Hi blizzdesign!
Please refer to this post – http://kriesi.at/documentation/enfold/color-section-with-100-container/
Cheers!
YigitThanks for getting back to me. I removed the CSS that I had tried and replaced it with:
bookTours .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
But it is still not working. I have a feeling that my style.css file is not being picked up, but, I can make other adjustments to the CSS that is in there for my mobile @media query and I can see those changes.Any other suggestions?
#bookTours .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
forgot the # for my ID
Wait a second, I found my issue. It is working now.
Here is the issue that I noticed:
In the Section ID input field, I had entered bookTours and when I added my CSS for the #bookTours ID, it wasn’t working.
I thought the issue was because I left out the # in the input field so I updated it to #bookTours, still nothing working.
Then I updated the CSS with the suggested method in your documentation and it still didn’t work.
So then I looked at the source code and noticed that the ID for the Color Section doesn’t match what I had entered into the Section ID input field.
I updated my CSS file to match the source code which looks like #booktours and then I checked the Color Section that I added it to and noticed that it still has #bookTours entered into the input field.So, what I have discovered is that even though I used a capital letter “T”, the ID that it generated did not include my capital letter. Is that a bug or are capital letters considered special characters?
Hey!
capital letters won’t work inside of section ID field. We recommend to use very simple words only.
Cheers!
AndyThat is exactly what I found out. Since it wasn’t keeping it a capital letter when it would render, my CSS selector didn’t match correctly so once I corrected that, it all worked itself out.
Might not be a bad idea to specify that in the notes next to the Section ID input field or allow the use of capital letters in future updates. Just a suggestion.
Love the theme, thanks for the support!
- The topic ‘Content of Color Section is not full width, restricted by container class width’ is closed to new replies.