[siriomi]

The default width settings for .wrapper and .container are such that on monitors/browsers that have only a 1024 width resolution, the content wraps. I’ve tried tons of ways to alter either the code or my child css to make it so the default settings are

.wrapper { width: 928px; }
.container { width: 888px; }

Rather than the default

.wrapper { width: 708px; }
.container { width: 668px; }

However, when I try to alter these values in my child css, then the responsiveness breaks on mobile and it uses the 928px width rather than scaling to the device’s width. This of course means that the mobile navigation floats all the way to the right, making it seem as though there isn’t navigation. Help please!

http://swingout.org/swingcolumbus

Responsiveness works fine on a desktop (changing width of browser). Please test on an actual mobile device. I’m using the Samsung Galaxy S2.

[Sanjip Shah]

@siriomi I think you are replacing the wrong part. You need to replace the 1038px of the wrapper and 978px of the container. These are in lines around 77.

[siriomi]

So you’re saying I need to change the theme code and if I attempt to change it in my child theme it won’t work?

[Sanjip Shah]

@siriomi Using a child theme is the best approch, if you are using the child theme you can do this changes in the style.css of the child theme.
If you alter those values then for the smaller screen sizes the same values will be taken so the responsiveness will break. You will have to rewrite the code for the smaller screens as well. Try adding the following css in the style.css for the child theme after you import the parent css. If you are playing with the responsiveness you need to understand the queries else you can hire a developer for this.

@media only screen and (max-width: 1078px) {
	.wrapper { 
		width: 928px; 
	}
	.container {
		width: 888px;
	}
@media only screen and (max-width: 767px) {
	.one-column-template .wrapper, 
	.wrapper { 
		width: 300px; 
	}
	.one-column-template .container, 
	.container {
		width: 280px;
	}
	.wide-layout .wrapper {
	   width: 100%;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.one-column-template .wrapper, 
	.wrapper { 
	   width: 450px; 
	}
	.one-column-template .container, 
	.container {
		width: 420px;
	}
	.wide-layout .wrapper {
	   width: 100%;
	}
}
@media only screen and (max-width: 319px) {
   .one-column-template .wrapper, 
   .wrapper,
   .one-column-template .container,
   .container { 
   	width: 95%; 
   }        
}

[Author]

Posts