X-Cart forums - Make light

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Make light_responsive Wider (https://forum.x-cart.com/showthread.php?t=73060)

Make light_responsive Wider

Hello,

So I have been fiddling around with the light_responsive template for a little while and for my project I would like to widen the container to about 1300px.

I have looked in the altskin.css file and found:

Code:

#page-container {

  z-index: 0;/*to display ui datepicker over flyout categories*/



}



#page-container2,

.wrapper-box {

  width: 940px;  /* width: 940px; */

  margin: 0 auto 0 auto; /*margin: 0 auto;*/

but when I edit either of these nothing changes and I am a bit lost on where to turn to now.

I have gotten it to widen by editing

Code:

#content-container,

.uo-container #content-container {

  padding-bottom: 150px;

}

And adding:

Code:

#content-container,

.uo-container #content-container {

  padding-bottom: 150px;

  width: 1300px;

}

but that pushes the right side out leaving the left side where it was, meaning it is no longer center. And if I put a border around the page container it is pushed outside the container so it is not clean.

Does anyone know how to widen the page container on light_responsive? Version 4.7.4

I think it has something to do with the ".wrapper-box" but it seems unresponsive (pun intended) when I edit it in the altskin.css file.

Thanks! I will update if I figure it out.

PS. the main css file under ./common_files/* does not seem to have an effect on most things to do with the light_responsive template and I am pretty sure it has to do with the altskin.css file... but if I am wrong please correct me!

Files effected:
./skin/light_responsive/css/altskin.css

Re: Make light_responsive Wider

I have found a solution, I am not sure if it is the "best" one but it seems to work.

I changed the following to widen it.

--ORIGINAL--

Code:

#page-container2,

.wrapper-box {

  width: 940px; 

  margin: 0 auto; 

}

#content-container,

.error-page #content-container,

.checkout-container #content-container,

.printable #content-container

{

  margin-top: 96px;

  margin-left: 0;

  width: 100%;

}

--NEW--

Code:

#page-container2,

.wrapper-box {

  width: 1300px !important;  /* width: 940px; */

  margin: 0 auto; /*margin: 0 auto;*/

}

#content-container,

.error-page #content-container,

.checkout-container #content-container,

.printable #content-container

{

  margin-top: 96px;

  margin-left: 0;

  width: 100%; /*100%*/

}

It only works with the !important; included.

Now the next issue that comes up is this breaks the mobile portion... when you shrink the width of the browser it does not collapse properly. I will update again when I figure that out. If anyone else has an idea of how to fix this please let me know. :-)

Re: Make light_responsive Wider

Okay... Don't do that!

The real way to widen it is down in the media screen settings

around line 3000 the media screen settings start.

I changed the following one from 1140px to 1300px and now the collapsing works.

Code:

@media screen and (min-width:1164px) {

  #page-container2,

  .wrapper-box {

    width: 1300px; /*width: 1140px;*/

  }

}

I changed the previous post in this thread back to defaults.

I have some tweaking to do to make the collapse smooth and a lot of other tweaks to our site... but the widening puzzle has been solved :)

Re: Make light_responsive Wider

Quote:

Originally Posted by macak49

Code:

@media screen and (min-width:1164px) {

  #page-container2,

  .wrapper-box {

    width: 1300px; /*width: 1140px;*/

  }

}

Just change the 1140px to 100% will widen the page and shrink to the correct size when on a small device.

Greg