-
Posts
-
Hi guys,
I need help with a color section.
I have a two-column layout and there are some situations where I need one of the columns to stretch up to the edge.
Furthermore, the background needs to stretch edge to edge.I’ve gave a custom ID Attribute to the color section and set a CSS as I found in one of your previous topic:
#section-container-width .container {
width: 100% !important;
min-width: 100%;
margin: 0 !important;
padding: 0 !important;
}This works perfectly for the image in the column, but still, leave the background not edge to edge.
I’ve also tried to add some CSS for the background but with no luck#section-container-width .container .avia-image-container-inner img {
width: 100%;
margin: 0;
padding: 0;
}Any chance you can help me with that?
Many thanksHey grassifrancesca,
Thanks for that. I’m not sure exactly what you are looking to achieve, could you post a screenshot highlighting the changes you would like to make please?
Best regards,
RikardHi Rikard,
Sure, see the link below
The green background (which is an image I uploaded as a background of the color section) doesn’t fit the whole screen (I’m on 17″ atm).
And it’s even worse when seen on a 24″.
It’s set as “stretch to fit”, so it should stretch to cover the container all the time, but it only works on a small screen (13″).
Any idea on how to fix this?
Many thanksHi,
Thank you for the inquiry.
You may need to adjust the background size value for that particular color section so that the image always inherits the actual width and height of the container.
.avia-full-stretch { background-size: 100% 100% !important; }Please note that the selector avia-full-stretch is a common css class name, which is applied to all color sections or sliders with backgrounds that is set to Background Repeat > Stretch to fit. You will have to apply a unique ID or class name to the element and replace the selector above so that you can directly target or adjust the style of that particular section.
Best regards,
IsmaelHi,
Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi Ismael,
The color section works perfectly now, but the home page is not 100% responsive on big screens.
I set the website to have a max container of 1366px and all the other pages follow that size, with the logo and the content always aligned across different screen resolutions.
The home page doesn’t work in the same way. As you can see from the screenshot attached. I’m sure it’s due to the rule of the color section that stretches the columns to fit the screen. I have been trying to add custom CSS for the big screens but with no luck.
Any chance you can help me with that?
Many thanksHi grassifrancesca,
The reason for that happening on the homepage is because of this code in Quick CSS:
#section-container-width .container { width: 100% !important; min-width: 100%; margin: 0 !important; padding: 0 !important; }once that is removed, the first column’s left padding of 10% should be removed and you should see it lining up with the logo properly.
Best regards,
NikkoHi Nikko,
Thanks.
I imagine that was the case, but if I remove that CSS I lose the color section at 100%.
At the moment that CSS allows me to have the right picture stretched to the edge of the page.
I’ve tried to add a CSS that father only big screen, and leave the right column as it is, but gives back the margin to the left column, but doesn’t work.@media only screen and (min-width: 1300px) {
div#section-container-width .container .avia-image-container-inner img {
width: 100%;
left-margin: 10%;
padding: 0;
}
}Hi grassifrancesca,
I see, I don’t see much of a workaround via CSS, however, a workaround I can think of is to use an image editor to edit the image make it’s width double (from 952px to 1904px), the left side should be transparent/empty while the right side (50%) of the space is the image (height remains unchanged) then save it as png (jpg does not support transparent color). Make this image the background image, then remove this ID from that specific Color section section-container-width, and make sure Background Repeat is set to Stretched to fit, this should make sure you’ll have the image occupy 50% of the width on the right and then have the content in the left lineup with the logo.
Best regards,
NikkoHi Nikko,
I think I fixed the issue.
Didn’t go with your solution but something similar. Thanks a lot for the suggestion!
- You must be logged in to reply to this topic.