Jigoshop not responsive?
URL to the page in question:
-
Why is it that when I decrease the size of the shop . . . the window doesn’t shrink down like the other pages. Have lots more to do here is the address. http://seadog.tagworkshop.com
Rob,
In the Custom CSS, take out the styles that relate to the catalog and replace them with this:
@media only screen and (max-width: 767px) {
#content {
width: 90% !important;
margin: 30px auto;
float: none !important;
}
.foxy-catalog,
.jigoshop .page-content {
float: none !important;
display: block !important;
width: 90% !important;
overflow: hidden;
margin: 0 auto;
}
ul.products li {
float: none;
margin-right: auto;
margin-left: auto;
margin-bottom: 35px;
height: 220px;
width: 300px;
}
}
See if that doesn’t line up on mobile for you.
Great! Anyway to make the product thumbnails shrink as well?
Just about anything can be done. Do you mean in the individual product view or the catalog view?
Yeah . . . the product view. The same thing as the staff thumbnail.
You can set a maximum width for the image container if you’d like to. Use this:
@media only screen and (max-width: 767px) {
.images {
max-width: 40%;
}
}
You can take out the actual style and place it in the earlier media query too. Just change the max-width to the largest size you’d like to have there. You could also use a width with either a percentage or pixel value if you’d rather.
I changed max width and when you reduce size of screen the image doesn’t hold its place in the layout. covers up text. I’m learning a lot working within this theme. Thanks again for the great support.
You might make a separate media query for really small screens, like most phones in portrait mode and set the width there to be 100% with no float. Often on really small screens, you end up with the best results by making the images appear on separate lines from the text. It’s an easier to manage layout that way.
- The topic ‘Jigoshop not responsive?’ is closed to new replies.