@media not applying

[bjoernx]

The following CSS has no effect:

@media (min-width: 767px) {
 #x-section-4 .x-column.x-1-1 {
width: 25%;
  }

This one works however:

@media (min-width: 767px) {
 .x-column.x-1-1 {
width: 25%;
  }

But then applies it to the whole page. I just want it to apply to my Section 4.

[jade]

Hi there,

Please provide the admin access to your site so that we can bypass the under construction page.

Thank you.

[bjoernx]

Added a secure note, thanks.

[jade]

Hi there,

Thanks for that.

I was able to check your site but I am not sure what you are trying to do because I can’t find the section with the ID x-section-4 .

Would you mind trying to give us more info what you are aiming to do so that we can check it?

Thank you.

[bjoernx]

Sorry, it should only apply to the following page:

[thai]

Hi There,

Please try with this custom CSS instead:

@media (min-width: 767px) {
    .el31.x-section .x-container.max.width {
        width: 25%;
    }
}

Hope it helps

[bjoernx]

Thanks this worked. How can I increase the height of that section so it’s rather full screen on desktops?

min-height works.

But now, how can I vertically center the text again?

[Joao]

Hi There,

You can add a gap element above your text.

The gap element has the functionality to show or hide based on screenwidth, so yu can hide it on mobiles and tablets for example.

Hope it helps

[bjoernx]

Thanks, I will try this.

Alternatively, can this be done with CSS aswell, so I don’t have to eyeball it when choosing the right size of the gap?
Also the break points don’t really work with the gap.

[christian]

I’m sorry but further custom development from here would be outside the scope of our support. The given CSS codes only serve as a guide and not to be taken as regular support service. If you wish to continue using CSS, you will need to learn from third party resources. Regarding centering, here’s a guide. There’s also lots of good resources available on the web.

Thank you for understanding.