Thread: Page Width
View Single Post
  #7  
Old 09-05-2014, 08:14 AM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,823
 

Default Re: Page Width

OK I understand now, you want to adjust the various sizes of the entire page width.

Your site is responsive. So it does re-size itself for smaller screens.

Here is a crash course in responsiveness via media queries:
Media queries define what CSS is applied based on the actual size of the page.
Here is how they are defined:
Code:
@media (min-width: 1037px) { #page-wrapper { width: 1037px; } }

Note the @media (min-width: 1037 px) followed by a bracket. There is also a closing bracket that ends this section. The pertinent styles are defined inside.

Media queries can also have a max-width range:
@media only screen and (min-width:480px) and (max-width: 640px) {...}

So you can see there are several min-widths set for your site. That is why it jumps in large chunks. For further example you have this CSS:
Code:
@media (min-width: 992px) { #page-wrapper { width: 940px; } }
This ensure that the page re-sizes to 940px when the screen size is greater than 992px. With Google Chrome in developer mode (right click, and inspect element) the current screen width should be displayed in the top right coren of the browser when you are actively re-sizing the page.

More info:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote