How to get box style only for text elements

[skated]

Hi,

I would like to achieve the same style as in this website: https://riccardo.im/recensioni/raspberry-pi-400/
All the website is fullwidth, and also some images in this page, but the text (and other contents, as well) are “width: 66.6667%”, following a boxed styling, I supposed - I’m not sure, because I’m not a professional in this field. How can I achieve this style for all content or texts with Pro theme in my website (giacomodenanni.it)?
Thanks a lot!

[nabeel]

Hi @skated,

Thank you for reaching out to us. To make sections fullwidth, please edit the page and change the Page Template to Blank - No Container | Header, Footer, this will make all of your sections fullwidth and the content inside the section will be wrapped around a container you set in the Theme Options > Layout and Design just like the boxed styling. You can set it to 66.6667%. Now on the same page if you want to make any section truly fullwidth without a container then you can go to the Row settings of this section and turn Off the Global Container

This should make your content fullwidth inside this particular section. Hope this helps!

[skated]

Hi @nabeel,

thanks for the reply. Maybe I didn’t make myself clear: I don’t want to make sections fullwitdth, becaue I already set Layout and Design to fullwidth, and I’m using Page Template Blank - No Container | Header, Footer, as you suggest. My question is: using these settings, how can I get some sections to be boxed? Or to be less wide/not fullwidth as the rest of the sections in the page/website? Like texts in the website I linked above (and in the picture below)?

Thanks again!

[ruenel]

Hello Giacomo,

Thanks for the clarifications. If you want to box style your text element, simply add some padding and box-shadow which can be done in the text element settings:

You can also set a maximum width for the text element so that it will not be wide enough. With the help of the left and right margin by setting it to auto, you text element will be at the center.

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Regards.

[skated]

Hi,
that’s almost what I was looking for. Is there a way to make your suggestions (padding or max width) to “disappear” when the screen are too small (e.g. on mobile)? Maybe using a different units, like % or vw? I tried, but I wasn’t able to find a solution

Thanks a lot!

[tristup]

Hi Giacomo,

I would recommend you to use the % or VW unit to adjust the padding and max-width, please change the unit into the attribute specified by my colleague in the last post. If that does not work you can add the custom CSS code to override the style in smaller screen sizes.
You can add the following code by adding a class[box-class] into the element you try to point out.

@media  (max-width: 480px) 
{
    .box-class 
    {    
        width:100% !important
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks