X-Cart forums

[macak49]

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:

#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

#content-container,
.uo-container #content-container {
  padding-bottom: 150px;
}

And adding:

#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

[macak49]

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--

#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--

#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.

[macak49]

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.

@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

[GMarler]

Originally Posted by macak49

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.

@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

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

Greg