-
Posts
-
Hi,
I would like to create a full height 100% page with contents inside. The problem I’m having was different screen size has different height so I can’t have the correct full height content. Please give me a hand on this. I need this only for desktop & mobile would be stick to current one.
Hey myproduct,
You can try using a Color Section and set the Section Minimum Height to “At least 100% of Browser Window Height”. Then, you can add content elements inside it. Our Blank Pages demo, for example, uses a Color Section with 75% Browser Window height. http://kriesi.at/themes/enfold-2017/pages/blank-pages/
This works for both desktop and mobile.
You can see the other uses of Color Section: http://kriesi.at/themes/enfold-2017/elements/color-section/
I hope that helps!
Let us know if you need further assistance.
SarahHi Sarah,
My problem was the content are much longer than the screen. For example, I’ve set the height on my 22″ monitor and the height was perfect on this monitor & the content goes long and scrollable on a 13″ notebook because of the screen resolution. Can I set the color section to maximum height of 100%?
Hi,
You can add a custom class to this color section following this article: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and add a custom CSS code applying the height of 100%.
Best regards,
John TorvikHi,
I did what you mentioned above. Created a color section and have the section ID for no-scroll and the css below
———css—————
#no-scroll {height:100% !important;}
———endcss—————The problem is, the contain was going for 100% height and It will scroll because of the additional header and the footer height on the page.
Hi there,
Can you give us the link to the page in question so we can take a look? If possible, please also grant us admin access, just in case we need to log in. You may put this information in the Private Content section of your reply.
Best regards,
SarahHello,
Thank you for link and the access. The page in question is the About Page, right?
I think the best solution is to edit your content so that it fits inside the smallest screen size you want to consider. I advise making the image smaller, or take a 2/3 container, maybe, instead of the 1/2 one. This way, the content fits inside the small screen, and then when it’s in a bigger screen, the content will fill the full height as well.
You can also consider making the image as the background of the color section. This way, it will not eat up space on the left and force the text to have smaller width and more height.
By the way: I also checked on my mobile phone, and given the text that you have, the user will need to scroll. Even making the font size small for mobile is not advisable because then it will not be readable. :(
I hope my suggestions are clear and helpful. Please do let us know if you need additional help.
Best regards,
Sarahhello
i tried this technique but it doesn’t work the way i think it should, as i want the background of the page to be a fixed colour, so perhaps you can help.
a) if i set the section setting to use ‘no minimum height, use content to define height’ then the section is as high as the content and the remaining browser tab has top and bottom black borders.
b) if i set section to 75% or something like that, the same thing happens with black borders if the browser is bigger than the content. and if the browser window is smaller, you have to scroll all the background which is not very attractive.
c) if I set a section to 100% browser height, then the section’s content on the page gets centered vertically to page height and all its vertical layout is lost and content below that section is pushed to one ‘page down’.how to just set the page so each section displays using ‘no minimum height, use content to define height’ which is the correct element layout for the section contents AND fill the browser, whatever size it is set to by user with the same background colour as the sections avoiding above problems
see links belowthanks
Hi s29ers,
Here’s what Victoria wrote:
https://cl.ly/cec20e2b8dba There are two color sections on this page. Which one do you want to be 100% of the height?
Best regards,
RikardHi Rickard, I just want the background of the page to be same colour background as the sections. Then I can set the content in the sections asI need. Setting the section size won’t work as I mentioned as the section content moves depending on the section size. Thanks
Hi Victoria,
Could you please attach a mockup of what you’re trying to achieve?
Still not very clear what you’re trying to achieve.
Best regards,
VictoriaOk, please see the box below. There are two sections as you can see on the page. The result should be as per the screenshot in the second file in the zip, and should always look like that regardless of browser size, and fill the window, without scrollbars showing.
- You must be logged in to reply to this topic.