Jigoshop not responsive?

Support Area Forums Foxy Jigoshop not responsive?

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question:
  • Author
    Posts
  • #11298
    Rob
    Participant

    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

    #11301
    Bill Robbins
    Moderator

    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.

    #11302
    Rob
    Participant

    Great! Anyway to make the product thumbnails shrink as well?

    #11303
    Bill Robbins
    Moderator

    Just about anything can be done. Do you mean in the individual product view or the catalog view?

    #11304
    Rob
    Participant

    Yeah . . . the product view. The same thing as the staff thumbnail.

    #11309
    Bill Robbins
    Moderator

    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.

    #11320
    Rob
    Participant

    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.

    #11323
    Bill Robbins
    Moderator

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Jigoshop not responsive?’ is closed to new replies.