Full width content with ICON

[janci]

Hi, I have used the below code to use fullwidth content under ICON stack, with a left sidebar

@friech

.page-template-default.x-icon .x-container.width {
max-width: none;
width: 100%;
}

it worked perfectly! Thanks!
However the text starts also on the very edge of the page… so in order to fix it i used this

@media(min-width: 979px) {
.el2.x-container {max-width: 70% !important;
margin:auto;}

@media(max-width: 979px) {
.el2.x-container {max-width: 80% !important;
margin:auto;}

however, after updating the theme to 6.x this stopped working…
can you please advise how to do this properly so that the texts and images dont go all the way to the edge of the page?

this is the page in question www.x.smilefoto.sk

[Prasant]

Hello @janci,

Thanks for asking.

First, please never share login details in public. Always use secure note feature to share login details so that the information is in between you and Themeco staff. You can refer following article to use secure note feature.

How To Get Support

To resolve the problem you are facing you have the option to use CSS padding property. Please add following CSS under X > Theme Options > CSS:

.page-template-default.x-icon .x-container.width {
    padding-left: 20px;
    padding-right: 20px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[janci]

Hi, thanks for the tips, I am already using the inspec tool and with my very basic knowledge of css i can modify some elements.
I have tried changing the padding before for this case, however, it not only offsets the text from the edge but also the section, thus the section is not full width anymore…
please have a look at the website now with the padding applied x.smilefoto.sk
thank you again for the help

[janci]

hi, this did it:

.x-section {
padding-left:180px !important;
padding-right:180px !important;
}

[friech]

Hi There,

@janci

@media(min-width: 979px) {
.el2.x-container {max-width: 70% !important;
margin:auto;}
@media(max-width: 979px) {
.el2.x-container {max-width: 80% !important;
margin:auto;}

Don’t use the .el on your selector because that is a generated dynamic CLASS, meaning that can be change when you moved things around, and when that happens it makes your custom CSS ineffective or might affect a different element.

Please update that to this:

@media(min-width: 979px) {
		.page-template-default.x-icon .x-section .x-container.width {
			max-width: 70% !important;
			margin:auto;
	}
}

@media(max-width: 979px) {
	.page-template-default.x-icon .x-section .x-container.width {
		max-width: 80% !important;
		margin:auto;
	}
}

You can found the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!