Adjusting Thumbnail View Grid Width

  • Resolved lyneas

    (@lyneas)


    6 years, 9 months ago

    Hello there!

    I cant find to seem a mobile-friendly solution to this problem. My Thumbnail-style catalogue doesnt fill the whole width of my page. i can adjust it with more than 100% width, but this is causing severe problems with the responsive design.

    Exact Problem:

    On my Laptop Screen right now, the Thumbnail Roster has a width of 858px but the container itself is 1160px wide. If it set the width manually it also destroys mobile layout.

    Adjusting Thumbnail box options doesnt seem to do anything for me, if this is the correct place to set this up.

    Any help is appreciated!

    regards
    M.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter lyneas

    (@lyneas)

    6 years, 9 months ago

    The Width seems to be set automatically between 74 and 100%, the automatic setting is faulty though as it sets my width to 74% for an otherwise empty screen, leaving lots of empty space.

    etoilewebdesign

    (@etoilewebdesign)

    6 years, 9 months ago

    Hi lyneas,

    74% is the default for desktop, when the sidebar is visible. 100% is the default for mobile, when the sidebar moves to the top.

    It looks like you set a custom width for your sidebar (150px), but then didn’t also adjust the width of the main catalog area to compensate. You needed to just the width of the main catalog div to compensate. For example:

    .prod-cat-inner {
width: calc(100% - 150px);
}
    Thread Starter lyneas

    (@lyneas)

    6 years, 9 months ago

    Hey there,

    thanks for the fast response! I already tried it the way you mentioned, but the problem remains the impact on the responsive Design.

    On mobile i now have 150 pixels of free space on the right side of the screen :/

    Thread Starter lyneas

    (@lyneas)

    6 years, 9 months ago

    i solved it for mobile!

    I set the search-bar width to 150px and the grid to 100% – 150%px

    for mobile i used the @media condition with a max-width (search bar disappears at 715px) and made sure the grid is at 100% beneath 715px screenres!

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adjusting Thumbnail View Grid Width’ is closed to new replies.