Move the background between two sections

Support
#1

I’m trying to recreate a design feature found on Dribble where white “cards” sit between two different colored background sections. Here a link to the example design: https://dribbble.com/shots/4236552-Task-Management-App

To recreate something similar I have made two sections.

Section One - Header and intro text.
Section Two - White columns which create information “cards” for different topics.

And I need the background from section one to sit lower (or the cards to sit higher) so that the background from section one comes down underneath the information cards from section two.

Here is a picture of how my site looks BEFORE:

Here is a picture I made inside MS Paint of how it should look AFTER:

I have asked something similar before, and your support team solved it by using $el {height: 300px;} (or some other similar height value that works for the page) inside section one.

But that CSS only works for pages with white columns inside section one. For this page design I need the white columns inside section two.

Here is a link to my development site where you can see the above page: http://wordpress-85855-529249.cloudwaysapps.com/vpn/black-and-white-vpn/

#2

Hi,

To achieve that you can simply add a negative margin to the row element of Section Two

Hope that helps

#3

Thank you! So simple :slight_smile:

I’m also having another problem where the cards (e.g. the white columns) are stacked together on mobile view.

How can I space them out?

On this desktop screenshot you can see there is a nice 35px gap between each white card, shown with the wiggly red line: https://screenshots.firefox.com/T7EfPtJvBTRfghrk/wordpress-85855-529249.cloudwaysapps.com

But on this mobile screenshot there is no gap between each column on mobile view, shown with the red line where a gap should be: https://screenshots.firefox.com/HhaZs5ndLP8DdUzd/wordpress-85855-529249.cloudwaysapps.com

#4

Hi,

You can add gap elements at the end of your columns and set your gap elements to be visible only in mobile.

Hope that helps.

#5

Thanks for the help, but that will not work.

The columns have a white background, if I add a gap element to the column it will just make the column longer. It will not create a gap in-between each column, it will just make the column longer. I need a gap inbetween each column.

A column margin would have been nice on mobile, but you do not have that option for columns.

#6

Hi @thecashbag,

It’s not recommended to alter the column’s margin due to responsive nature of the layout. The total width of the entire column should be 100% including the spaces. Adding fixed margin could affect it, how about padding? That should add spaces in between too.

Thanks!

#7

Padding will not work because it just increases the size of the column, similar to how
using a gap element does not work because it also just increases the size of the column.

I think maybe I wasn’t clear about what I’m trying to achieve so here is a quick screencast to show what I am talking about: https://www.useloom.com/share/643e68e4007c48abb1e97760a4513040

And here is the live link again: http://wordpress-85855-529249.cloudwaysapps.com/vpn/black-and-white-vpn/

#8

Hi,

To add margin to your columns, add a class to your row element.

Then add this in Cornerstone > CSS

@media(max-width:767px){
.my-row .x-column {
    margin-bottom:20px;
}
}

Hope that helps.

#9

Thanks this will do the trick :slight_smile:

#10

You’re most welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.