- This topic has 6 replies, 2 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
September 13, 2020 at 3:50 am #1441240Sam
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 #1441246DavidStaffCustomer 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.
September 13, 2020 at 4:49 am #1441288SamPerfect – 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 #1441305SamJust 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 #1441334DavidStaffCustomer 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 */ } }
September 13, 2020 at 6:38 am #1441380SamPerfect. Thank you so much, David!
September 13, 2020 at 11:49 pm #1442042DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.