X Pro - Edit styling based on Display size

Support
#1

Hi guys,
Is it possible to edit a ROW or Column styles, paddings and settings based on display view?

Often page and elements look great on 1200px+ and smaller displays but when you are looking on iPad, or iPhone the elements don’t align correctly, leaves massive gaps or they are not centred. Basically, they don’t look slick and nice.

I know you can hide based on the screen size but It will be awesome to adjust some elements based on your screen view.

Additionally being able to hide background on mobile devices will also be useful but at the moment I don’t know to do that.

Any help is much appreciated.

#2

Hello @rafalkukla,

Thanks for asking. :slight_smile:

For the particular row or column you have the option of adding class under Customize > Class. After that using CSS media queries you can write CSS codes to adjust styling based on viewport size.

Here’s the resource that you can take a look to get started with CSS media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.youtube.com/watch?v=2KL-z9A56SQ

Thanks.

#3

Hey @Prasant

Thanks for your reply. That’s great. I can see how I can make changes based on the view port.

Any idea how I can apply those changes to a specific column?

#4

Just to give you an idea what I did.

I’ve got full-width row split 50-50. So in the first column, I’ve put class name “square-box” (without brackets) and saved it, then in css Elements, I called it this way

media only screen and (max-width: 767px) {
[class=“square-box”] {
background-color: lightblue;
}
}

This is just a test to remove the background, but it doesn’t change or do anything when I’m viewing from smaller displays.

#5

Hi @rafalkukla,

You can try something like this, and it should work

@media (max-width: 767px) {
.square-box {
background-color: lightblue !important;
}
}

It’s not going to work since it has multiple classes, and your CSS is only applicable for there is onlt 1 clas as exactly as class="square-box".

Thanks!

#6

Thanks Rad,
I’ll try that soon.

Any tips on how to remove background image from a row or column? I can’t seems to work this around.

#7

Hey There,

To remove the background image, you can update the code into this:

@media (max-width: 767px) {
  .square-box {
    background-color: lightblue !important;
    background-image: none;
  }
}

Hope this helps.

#8

Hi RueNel,

I’ve tried that, and I’m afraid Background image won’t go away.
I can do small adjustments, background color but for some reason background image keep showing.

#9

Also, going back to your suggestion,

It seems to be working for background color change only, but it doesn’t seems to be working if I want to change border, gaps, paddings etc.

It works if I first inspect the code, and copy the div ID as follow: (otherwise it doesn’t work)

@media (max-width: 767px) {
div.e49-29.home-support-left {
border: none;
margin-bottom: 50px;
}
}

#10

Hey There,

For best results, you will have to edit the page back in Cornerstone, click on the section that you would like to remove/change the borders, gaps, etc in smaller screens and find the “Customize” tab. You will have to add the element css like this:

@media (max-width: 767px) {
  $el {
     border: none;
     margin-bottom: 50px;
  }
}

Hope this helps.

#11

HI there,
Thanks, Will try that.

ANy suggestion on how to disable image background on mobiles? Your suggestion doesn’t seems to have any affect?

#12

Hi RueNel

I’ve tested the code you suggest in first column, as suggested

@media (max-width: 767px) {
$el {
border: none;
margin-bottom: 50px;
}
}

but doesn’t seems to have any effect I’m afraid.

#13

Hey There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look at your page?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#14

Sure

CHeck below

#15

Its a home page / Endpoint Protection column you can test with.

I deleted my CSS workaround

#16

Hello There,

I have logged in and edited the said column. I added this in the column settings “Customize” tab

@media (max-width: 767px) {
  $el {
    border: none !important;
    margin-bottom: 50px !important;
  }
  
  $el .x-bg-layer-lower-image{    
    background-position: left bottom !important;
  }
}

If you do not want to display the background image, just replace background-position: left bottom !important; with background-image: none !important.

Please check your site now.

#17

HI RueNel
I can see the difference is with !important;

#18

The !important is important because the properties you used are also generated by the builder’s CSS and it has precedence over your element’s CSS because it uses more classes.

Please also note that we have given custom code here to get you started only. We will not continually provide custom code as that is not a part of our support service as you can read in our Terms.

Thanks.

#19

That’s great. All working. Thank so much for your help.

#20

You’re welcome. Glad we’re able to help.