Post by seanstorm100 » Thu Dec 05, 2019 4:43 am

Hello Team,

I am using OC v3.0.3.2, Default Theme, Clean Install
I would like to find out how to expand the size of the store. Its a bit narrow and I would like to extend it a little further on the sides for all pages. I am just not sure if this is controlled by CSS or where to find it. I know keeping it narrow is good on the eyes but my adjustments will be fairly small.

I also like the default theme, I plan to develop the theme in the future by adding more styles etc when my store is live but for now, the Default works based on my needs except its a little two narrow.

Regards,
Sean

New member

Posts

Joined
Tue Nov 05, 2019 11:08 pm

Post by by mona » Thu Dec 05, 2019 5:13 am

If you have learned from the previous posts about @media

It is created in bootstrap, so it is a bit of a problem - YOU DO NOT EDIT THIS FILE - ok you can do whatever you like, but .. your stylesheet will override (cascading) it and then there is that whole conversation about creating a new stylesheet - that is besides the point .. so to answer your question:

Code: Select all

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}
Note the point here ..
you need to write a whole new set of rules for each screen size ..
there is a way to do this in a better way - but I get paid for that :)

Attachments

Screen-Shot-2019-12-04c.jpg

Screen-Shot-2019-12-04c.jpg (51.37 KiB) Viewed 94 times


Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by seanstorm100 » Thu Dec 05, 2019 5:58 am

Hey Mona - I really appreciate your help with all my questions and thanks for that.
I tried what you sent but this took no effect on the store as if it was ignored. Rem I am not a coder, I placed this in stylesheet.css at the bottom.
by mona wrote:
Thu Dec 05, 2019 5:13 am
If you have learned from the previous posts about @media

It is created in bootstrap, so it is a bit of a problem - YOU DO NOT EDIT THIS FILE - ok you can do whatever you like, but .. your stylesheet will override (cascading) it and then there is that whole conversation about creating a new stylesheet - that is besides the point .. so to answer your question:

Code: Select all

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}
Note the point here ..
you need to write a whole new set of rules for each screen size ..
there is a way to do this in a better way - but I get paid for that :)

Regards,
Sean


New member

Posts

Joined
Tue Nov 05, 2019 11:08 pm

Post by by mona » Thu Dec 05, 2019 6:26 am

You are most welcome ..

That is the original code - so it won’t change anything if you just copy the same code in a different file ‘further down the line'
It means the container width is 750px for all screens of 768px upwards until
screen width of 992px where the container becomes 970px upwards until
screen width of 1200px where the container becomes 1170px ..

You want something else .. I suspect .. you do not like the additional space within the steps ..
At a guess you want to do something like

Code: Select all

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:798px) {
    .container {
        width: 780px
    }
}

@media (min-width:828px) {
    .container {
        width: 810px
    }
}
etc etc etc

a lot of code .. and there are things that may be detrimentally effected by this .. but no harm to try ..


You could of course try (and be sure you check for browser support - Firefox specifically, older versions.)

Code: Select all

@media (min-width:768px) {
    .container {
        width: 80%
    }
}

@media (min-width:992px) {
    .container {
        width: 80%
    }
}

@media (min-width:1200px) {
    .container {
        width: 80%
    }
}
a much nicer way in my opinion, but there are more likely to be detrimental effects ..

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by seanstorm100 » Thu Dec 05, 2019 6:39 am

Awesome, I now understand. Thank you again.
This one worked!
by mona wrote:
Thu Dec 05, 2019 6:26 am
You are most welcome ..

That is the original code - so it won’t change anything if you just copy the same code in a different file ‘further down the line'
It means the container width is 750px for all screens of 768px upwards until
screen width of 992px where the container becomes 970px upwards until
screen width of 1200px where the container becomes 1170px ..

You want something else .. I suspect .. you do not like the additional space within the steps ..
At a guess you want to do something like

Code: Select all

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:798px) {
    .container {
        width: 780px
    }
}

@media (min-width:828px) {
    .container {
        width: 810px
    }
}
etc etc etc

a lot of code .. and there are things that may be detrimentally effected by this .. but no harm to try ..


You could of course try (and be sure you check for browser support - Firefox specifically, older versions.)

Code: Select all

@media (min-width:768px) {
    .container {
        width: 80%
    }
}

@media (min-width:992px) {
    .container {
        width: 80%
    }
}

@media (min-width:1200px) {
    .container {
        width: 80%
    }
}
a much nicer way in my opinion, but there are more likely to be detrimental effects ..

Regards,
Sean


New member

Posts

Joined
Tue Nov 05, 2019 11:08 pm

Post by paulfeakins » Thu Dec 05, 2019 6:19 pm

seanstorm100 wrote:
Thu Dec 05, 2019 4:43 am
I also like the default theme, I plan to develop the theme in the future by adding more styles etc when my store is live but for now, the Default works based on my needs except its a little two narrow.
Check out our CSS only themes for inspiration (both have live demos):
https://www.opencart.com/index.php?rout ... n_id=36706
https://www.opencart.com/index.php?rout ... n_id=37931

For quick, professional OpenCart support please email info@antropy.co.uk


User avatar
Expert Member

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - Reigate, Surrey, United Kingdom
Who is online

Users browsing this forum: No registered users and 27 guests