Forum Replies Created
-
Posts
-
I solved giving the first color section an id, and overwriting the js rule.
#hero { height: 100vh !important; }Hey Jordan,
I’m working locally on MAMP because I need the old website to be online at the same time, so I cannot share a link.
I think I understood the issue but I need some help.
Enfold removes the height of the header from the first builder element set to have “100% window height”.
I need to be able to remove this behaviour in the js, and I bet it’s here.
As you can read in the comment before the code, it must be here the part to change!//various section heights (100-25% as well as 100% - header/adminbar in case its the first builder element) css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container, .av-cell-min-height-100 > .flex_cell{height:"+wh100+"px;}\n"; $.each( pc_heights, function( index, value ) { var wh = Math.round( wh100 * ( value / 100.0 ) ); css += ".av-minimum-height-" + value + " .container, .av-cell-min-height-" + value + " > .flex_cell {height:" + wh + "px;}\n"; }); css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow, .avia-builder-el-0.av-cell-min-height-100 > .flex_cell{height:"+wh100_mod+"px;}\n"; css += "#top .av-solo-full .avia-slideshow {min-height:"+solo+"px;}\n";Maybe with a screenshot it’s easier to understand.
Unfortunately the color section doesn’t cover all the window height, even if it is set on 100% height.
The menu bar is 80px. How can I add 80px to the 100% in quickJS?
Or how can I set the color sectio to 110% of the window height?I used this code to change the menu to transparent and moving the main container to the top of the page:
.header_bg { background: rgba(255, 255, 255, 0.6) !important; } #main { padding-top: 0 !important; }I checked this post: https://kriesi.at/support/topic/color-section-percentage-of-height/
But it seems not working anymore, I cannot find that line of code in the js.Thanks
Thanks Rikard,
I actually polished a bit the CSS you suggested me.
#container-fitt { max-width: 1310px ; width: 85% ; padding: 0 ; position: relative; left: 50%; transform: translate(-50%); } #container-fitt .container { max-width: 1310px !important; /* The important here it's to overwrite the media queries for small screens */ width: 100% !important; /* Same as above */ padding: 0 ; margin: 0 ; }Now the content of the color section is full width and the section itself has the same with of all the rest of the site.
I added the id #container-fitt, so I can manipulate only the color sections I want.I have a general question, does the quick CSS get lost when you update the theme? or it is safe.
Thanks
Hello Rikard.
I’d like to target by class specific Color Sections, obtaining the result in the images linked below.
I don’t want any space (left and right) between the Color Section and the Column Section within.
And I want to apply this behaviour for any screen size.The grey container is a Colour Section.
Here it’s the result I want to obtain. But only for specific Colour Sections targeting a class I added in Color Section Advanced —> Developer Settings —> Custom CSS class (The name of the class is “fitting-color-section”)
Thanks
