Jump to content

Problems with Homepage Image Alignment on Mobile Site


Recommended Posts

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

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: 

:ph34r:  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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...