badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Change default width scaling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 5, 2013 at 7:29 pm #4974
    siriomi
    Participant

    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.

    November 12, 2013 at 11:22 am #5096
    Sanjip Shah
    Participant

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

    November 12, 2013 at 2:14 pm #5109
    siriomi
    Participant

    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?

    November 13, 2013 at 5:49 am #5126
    Sanjip Shah
    Participant

    @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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.