Background gradient sections

[daddysnack]

Hey there I have achieved the desired background effect with the gradient etc (below code) however i was wondering how i can make sure that certain sections of the website cover 50, 75 or 100% of any screen it is on (mobile or desktop etc)

I have a feeling that the height in the CSS below is causing inconsistencies in the way the sections are viewed across devices.

I want to make sure that my gradient background sections fill 100% of the screen.

Please help!

$el {
width: 100wh;
height: 80vh;
color: #fff;
background: linear-gradient(-45deg, #f2709c, #ff9472);
background-size: 200% 200%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

[jade]

Hey Tariq,

You are right. It is the height value in the CSS code that you have that controls the section’s height.

The measurement you are using is vh which is the vertical height of the screen where the site is opened. Since you have 80vh, it will cover 80% of the screen height or the viewport.

To read more about the wh and vh, please check this link:

Using vw and vh Measurements In Modern Site Design

Hope this helps.

[daddysnack]

Thanks for your help but its not translating cleanly into % of the screen. I can give you access to my website so you can see for yourself if that may help?

If I put 100vh or % it is going beyond full screen and all devices and the content within the container is not centralising within that section. Any ideas?

Many thanks

[ruenel]

Hello Tariq,

I have check the site that is associated with your license code. I am not sure if I am checking the correct one. It is best if you can give us the URL where you have applied the code so that we can take a closer look why it is not working. If you can give us the WP access, that would be great too.

Thank you in advance.

[daddysnack]

Hi @RueNel thank you its driving me crazy as the preview on all devices on cornerstone is showing the website exactly how i want it but once i save and view it live its totally different. How can i send you my log in details privately?

many thanks

[ruenel]

Hello Tariq,

You can create a secure note in your next reply and add the credentials. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Cheers.

[daddysnack]

Thanks @RueNel it should be above

[lely]

Hi Tariq,

There is syntax error on CSS. Width unit should be vw. On your CSS above you are using wh width: 100wh;. It should be width: 100vw;

Hope this helps.

[daddysnack]

Hey there, thanks for getting back to me that didn’t help and actually made the section width go to about 70% rather than 100!

I think the CSS I’ve used is not the best. All I want is a full screen section where I can edit the gradient colour and it maintains 100% on all devices with content centred in the screen. It seems basic but I can’t seem to achieve it with this theme?

What would you suggest to create a full screen gradient background?

[ruenel]

Hello Tariq,

If you want to have the gradient for your section which will be fullscreen, you use this code instead:

$el {
    min-height: calc(100vh - 80px);
    color: #fff;
    background: linear-gradient(-45deg,#f2709c,#ff9472);
    background-size: 200% 200%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

.logged-in $el {
    min-height: calc(100vh - 112px);
}

vh is for the browser height and then vw is for the browser width.

Hope this helps.

[daddysnack]

You’re the best thank you

[friech]

We are delighted to assist you with this.

Cheers!