- This topic has 6 replies, 2 voices, and was last updated 4 months, 1 week ago by
David.
-
AuthorPosts
-
September 13, 2020 at 3:50 am #1441240
Sam
Hello,
I’ve been creating a new site (URL below) on a temporary domain using GeneratePress, and have been creating sections using gradients, as you can see in the red & white ‘why work with us’ section.
It looks great on desktop & tablet, but the gradient obviously looks dreadful on mobile and cuts through half of the text – is there a more efficient way to create 4 separate blocks of different colours that’ll look good on all devices, or a way to create custom gradients on mobile so I can make it look good on all devices?
Thanks,
SamSeptember 13, 2020 at 3:56 am #1441246David
StaffCustomer SupportHi there,
if you select a Grid Item – you can set its own background color make one red and the other item in the grid White.
Grid items are Containers and have most of the styling controls that the Container Block has.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 13, 2020 at 4:49 am #1441288Sam
Perfect – thank you, David!
Just one more thing: If you have a look at the top part with 3 case studies, I love how the gradient cuts through the laptop images on desktop & tablet, but on mobile it covers the red ‘view case study’ text. Is there any way to change the gradient on just mobile to switch colours where I’d like?
Thanks in advance.
September 13, 2020 at 5:20 am #1441305Sam
Just adding onto this – I’ve implemented the grids into the page now as you can see and it looks fantastic on mobile. However, the colours don’t match up on desktop (there’s a space between the two red boxes), if you get what I mean?
If you could let me know how to fix this and make the background colour come to the edge of the grids that would be fantastic.
September 13, 2020 at 5:49 am #1441334David
StaffCustomer SupportOK so lets get rid of the column gaps.
Select the Grid Container ( not the grid items ) see here:https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block
Then set the Horizontal Gap to
0
Currently there is no Responsive controls for gradient backgrounds. So you would need to add some custom CSS to change that.
First select the Container block with the gradient, and in Settings > Advanced > Additional CSS give it a class eg.
mobile-gradient
Then add this CSS to remove the gradient on mobile and apply a background color:
@media(max-width: 768px) { .gb-container.mobile-gradient { background-image: none !important; /* remove gradient */ background-color: #f00; /* set background color */ } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 13, 2020 at 6:38 am #1441380Sam
Perfect. Thank you so much, David!
September 13, 2020 at 11:49 pm #1442042David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.