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%;
}
}