Snokown Posted November 13, 2015 Share Posted November 13, 2015 Hi guys, My site is www.consignorsavenue.com I'm having trouble finding the CSS (and what I would edit it to) so I can change how that bottom row of six images shows up on mobile. The desktop site is exactly how I want it, however when I view the site on mobile, the images blow up to a larger size and lose a ton of quality. What I would like is to have those images show up on mobile in 2 columns with 3 rows. Thank you all in advance! Link to comment Share on other sites More sharing options...
Snokown Posted November 13, 2015 Author Share Posted November 13, 2015 Okay, I found my solution. it was located in the "Home Hook" part of the hooks.css file. Here's what I did: /* Home hook CSS */ #htmlcontent_home ul { margin: 0 -5px; } #htmlcontent_home ul li { padding: 5px 10px; } (removed a zero where the ninja face is to fix padding) @media (max-width: 479px) { #htmlcontent_home ul li { width: 50%; } } (was 100%) #htmlcontent_home ul li img { max-width: 100%; height: auto; } @media (max-width: 479px) { #htmlcontent_home ul li img { min-width: 100%; } } #htmlcontent_home ul li.htmlcontent-item-5 { width: 66.6667%; } @media (max-width: 479px) { #htmlcontent_home ul li.htmlcontent-item-5 { width: 50%; } } (was 100%) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now