X-Cart forums

[voidopolis]

So,I want the Noblesse template to be wider overall. I found overall how this works in CSS. I was able to use the inspect feature in chrome and modify it on the site "live". but I can't figure out how to change it with Custom CSS on the site.

I removed all other customer CSS and added this:

@media (min-width: 1510px)
#page-wrapper {
width: 1500px;
}

this is out of the box / default / standard Noblesse

[tony_sologubov]

Hi @voidopolis,

Welcome to X-Cart forums!

Your code defines width of central area as 1500px, in case that your browser window's width is 1510px or wider. Is this the result you are trying to achieve or did you plan anything different?

Tony

Originally Posted by voidopolis

So,I want the Noblesse template to be wider overall. I found overall how this works in CSS. I was able to use the inspect feature in chrome and modify it on the site "live". but I can't figure out how to change it with Custom CSS on the site.

I removed all other customer CSS and added this:

@media (min-width: 1510px)
#page-wrapper {
width: 1500px;
}

this is out of the box / default / standard Noblesse

[voidopolis]

Thanks for the reply Tony;

Basically, when someone is browsing the site at a resolution that allows for max screen width(>1180px), I'd like the width of the template overall to be wider - I don't want as much padding around the edges on max resolution. This CSS below seems to control that - for the 3 page resolutions (depending on resolution of the browser, it adjusts the screen width to three sizes (1180, 980 and 760)


@media (min-width: 1200px)
#page-wrapper {
width: 1180px;
}

@media (min-width: 992px)
#page-wrapper {
width: 980px;
}
@media (min-width: 768px)
#page-wrapper {
width: 760px;

I've found using chrome's inspector - for the first resolution, that I can adjust the min-width to 1510 and the #page-wrapper {width: #1500;} - I can achieve what I'm looking for - a wider width template with less padding around the sides. However, when I put that code into the custom CSS of the site, it does not affect the page width as expected.

I didn't know if there was a better way to handle this, or if I'm doing it wrong... or...

I appreciate the help.

[tony_sologubov]

Originally Posted by voidopolis

Thanks for the reply Tony;

Basically, when someone is browsing the site at a resolution that allows for max screen width(>1180px), I'd like the width of the template overall to be wider - I don't want as much padding around the edges on max resolution. This CSS below seems to control that - for the 3 page resolutions (depending on resolution of the browser, it adjusts the screen width to three sizes (1180, 980 and 760)


@media (min-width: 1200px)
#page-wrapper {
width: 1180px;
}

@media (min-width: 992px)
#page-wrapper {
width: 980px;
}
@media (min-width: 768px)
#page-wrapper {
width: 760px;

I've found using chrome's inspector - for the first resolution, that I can adjust the min-width to 1510 and the #page-wrapper {width: #1500;} - I can achieve what I'm looking for - a wider width template with less padding around the sides. However, when I put that code into the custom CSS of the site, it does not affect the page width as expected.

I didn't know if there was a better way to handle this, or if I'm doing it wrong... or...

I appreciate the help.

You can try to use code like this:

@media (min-width: 1200px)
#page-wrapper {
    width: 99%;
}

Please, let me know if it is something that works for you.

Tony

[voidopolis]

Originally Posted by tony_sologubov

You can try to use code like this:

@media (min-width: 1200px)
#page-wrapper {
    width: 99%;
}

Please, let me know if it is something that works for you.

Tony

nope. That doesn't seem to work either.

#page-wrapper {width: 1450px;} 

changes the size of the page to what I'm looking for, but the page no long resizes when you resize the browser window for different formats (no long responsive). x-cart seems to not like the @media tag at all in the custom CSS. the page seems to just ignore everything in that whole block of CSS.

[tony_sologubov]

Originally Posted by voidopolis

nope. That doesn't seem to work either.

#page-wrapper {width: 1450px;} 

changes the size of the page to what I'm looking for, but the page no long resizes when you resize the browser window for different formats (no long responsive). x-cart seems to not like the @media tag at all in the custom CSS. the page seems to just ignore everything in that whole block of CSS.

Oh, there was syntax error in CSS code I sent earlier.
Try this one:

@media (min-width: 1200px) {
  #page-wrapper {
      width: 96%;
  } 
}

or this one for CrispWhite:

@media (min-width: 1200px) {
  #main-wrapper #main {
    width: 96%;
  }
  
  .container {
    width: 96%;
  }
}

Tony

[voidopolis]

Originally Posted by tony_sologubov

Oh, there was syntax error in CSS code I sent earlier.
Try this one:

@media (min-width: 1200px) {
  #page-wrapper {
      width: 96%;
  } 
}

Tony

That did it for Noblesse! Thanks for the code.