[Resolved] Apply a layout element only to desktop view

[Suresh]

Hi all,

I am trying to set a different content-width for a specific blog post category. I found out online that a good way to do it is with ‘Elements’.

I then created a rule to add the desired content-width but the change also affects the mobile and tablet view in a way that I don’t like.

So, I searched and looked that you can add some custom CSS to hide the element for specific devices, but I am not sure how to CSS the specific element.

[Leo]

Hi there,

Can you guide me to the page you are referring to?

In this case, it might be easier to just use CSS instead of an element.

Let me know 🙂

[Suresh]

Hi Leo,

Thanks for the quick reply.
The page is still in development, here is the link: https://pinetechapple.com/2020/08/09/the-best-5-monitors-for-working-from-home/
As the element is making the tablet and mobile view too near the margin I would like to apply the element only to the desktop view.

[Leo]

Would it work if you remove the Contained page builder option that is currently applied?

That is the reason why the paddings are removed.

[Suresh]

Sorry Leo, I am not sure how to get to the options shown on: https://docs.generatepress.com/article/page-builder-container/

[Leo]

Is it happening to every post?

If so you likely have a layout element that is set to Contained and applied to all posts:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Maybe the same one with the container width change?

[Suresh]

Hi Leo,

No, the element I created is only applied to the posts with category = “Guides”.
I want to increase the width of the post content as this content will be longer then the usual posts I do.

The element created is setting the width to 1200px. Is there any work-around to keep the benefit of this element without affecting the mobile/tablet view?

[Leo]

Do you have any other Layout elements created that has the Contained option selected in the page builder container option?

[Suresh]

Hi Leo,

No, that is the only layout element I created

[Leo]

There is a definitely a Contained option selected somewhere as seen here:
https://www.screencast.com/t/78LnswvdT

Can you check the metabox for that post?
https://docs.generatepress.com/article/page-builder-container/

[Suresh]

I think that’s the result of the layout element.

The only sections I see the container are in the layout element, which is “Contained = 1200px” and in the wordpress post builder, that is on Default.

I am not sure if there’s any other place where I can check :/

[Leo]

Ahh you are actually using a page builder on that page so the container option makes sense.

Is the issue here that the content is against the edge of the screen on mobile?

If so that’s not causing by the container width you’ve set as it’s using max-width setting so the container shrinks with the screen width.

In this case, you would want to add some padding to the Elementor content on mobile within the plugin.

[Suresh]

Padding on elementor fixed the mobile and tablet. Thanks Leo and sorry for the headache!

[Leo]

No problem 🙂

[Author]

Posts