Hi @Ismael,

Fantastic! It works! (See link attached for reference)

However, the custom CSS now also affects the header. I would like the header to appear consistent across all pages.

What do I need to add so that the header is excluded from the custom CSS?

Thank you again!!

Hi @guenni007 hi @yigit

Would you be able to help me with a recommendation please on what kind of element/slider to use for this?

Thank you, appreciate it! :-)

Hi @guenni007 and hi @yigit

You might know what my mistake is here :) I’ve tried both Color section and Grid row and neither works. How would you set this up to have the 2 widgets next to each other on Mobile as well?

Thanks for noting that, @guenni007! :-)

So I have input the following 4 Quick CSS now and the page width is still not adjusted: https://negotiations-masterclass.com/reviews/

#top.page-id-30.container {
max-width: 990px;
}

.page-id-30 .container {
max-width: 990px;
}

#top.postid-30 .container {
max-width: 990px;
}

.postid-30 .container {
max-width: 990px;
}

I also disabled “CSS file merging and compression in Enfold theme options > Performance” and also cleared the cache on my laptop. Nevertheless the issue is not resolved yet.

What do you think is happening here and how can we resolve it?

Hi @guenni007

I had put it into 2 text blocks to be able to easily control the font size and color (color is darker for the bigger font/title). Is that ok or would you recommend to change that?

Removed the permanent break – didn’t notice it when I checked. Thank you!

Hi Yigit,

I disabled “CSS file merging and compression in Enfold theme options > Performance” and also cleared the cache on my laptop. Nevertheless the issue is not resolved yet.

How does the page (link below) display on your laptop/desktop, in full width or not?

I tried out the following codes after the disabling and cache clearing:
.page-id-30 .container {
max-width: 990px;
}

.post-id-30 .container {
max-width: 990px;
}

#top .page-id-30 .container {
max-width: 990px;
}

Hi Yigit,

Unfortunately it still doesn’t work.

Here’s the Quick CSS code I have entered so far – please see private content below.

Thanks in advance for checking!

Please see the actual page in private content below, if it helps. Thank you! :)

Hey Yigit,

Very helpful! Where do I find the Page ID though?

Thanks again,
Markus

Hi Team,

Does someone know the CSS for this – how to adapt the logo size in the header (make it a bit smaller)?

Thank you,
Markus

Thank you Ismael! Great advice with the Color Section Element – it works now! :)

Hi Mike,

Thank you for your advice!

How could I import the full script into WordPress to try it out?
Looking at all the possibilities of it (https://swiperjs.com/swiper-api#navigation), I believe it could work.

Will I still have an “interface” to easily try settings out with the full script or I can only do that manually in the script?

Thanks,
Markus

Hi @Mike

Do you possibly have an idea / solution for how to solve for this as well? :)

I’d basically like the logo in the header to display smaller for Mobile.

Hi Mike,

Thank you, that code works well!

Where can I actually adjust the 50px margin? I looked for it under “Column” > “Margin”, however cannot see that it can be adapted there.

Best regards,
Markus