CSS assistance

  • Davinder

    (@davinderschiedel)


    6 years, 8 months ago

    Hi.

    Looking to tidy up the category pages and to make sure that they also look okay on mobile.

    https://www.schiedel.com/product-information-finder/

    I’ve done a float left and position relative, but they don’t collapse into a single column when reduced in size.

    Same with the product category pages – they are a bit untidy.

    Any suggestions.

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

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You have the “mk–col–4-12” class container width set as 33.3%, so there will always be 3 columns no matter how small a screen. Add media queries that change this width when the screen is smaller than a certain width. One step can change the width to 50%, then another to 100%. For example:

    @media screen and (max-width: 512px) {
  .mk--col--4-12 { width: 50%; } 
}

    If you are not working on a child theme, the best place for custom CSS is tha additional CSS panel of the customizer.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS assistance’ is closed to new replies.