Themeco Community

Hey there,

Please add a Gap element after your content in the first column and set it to display only in mobile using the Hide Based on Screen Width feature.

Thanks.

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 767px) {
.page-id-2479 #x-section-2 .x-column.x-sm {
    margin-bottom: 20px !important;
}
}

Let us know how this goes!

Hi,

You need to remove the top padding of your row in smaller screens

See Video – http://screencast.com/t/X8SiT4AZf

You can add a unique class to your row elements so you can control the spacing in mobile.

eg. Add my-row in the class field.

You can then add this in your Custom >Edit Global CSS

@media (max-width: 767px) {
   .my-row.x-container {
       padding-top:0;
   }
}

With regards to media queries, please refer to the link below.

Media Queries for Standard Devices

Hope that helps.

Hi there,

Thanks for updating. It’s pretty straightforward so should work. Make sure to add the class my-row and use the same class as selector. If you change the class name then make sure to change from both place.

If it still doesn’t work, point us where you have used this.

Cheers!

Hi again,

Please remove the digits from the class name, it will not be picked by the browser if it starts with digits. Change it to .my-row and then apply CSS.

This should resolve the issue, let us know how this goes!

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

Hi There,

Please update the given custom CSS code to this:

@media (max-width: 767px) {
	.my-row.x-container {
	    padding-top: 0 !important;
	}
}

Hope it helps, Cheers!