Responsive??

  • Resolved mag82008

    (@mag82008)


    7 years, 3 months ago

    Need the output of this plugin responsive, means that on smartphones the columns should be adjust that ist fits on the screen. currently it does not.

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

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

  • I ran into this as well. Its insane that this plugin uses tables instead of resposive divs.

    The trick is to set your columns to more than your products (ie 999) and use CSS to turn the table <td> into inline-blocks. Also you may need to tweak the card width in order to fit inside your theme content area. You can do this with width shortcode attrib, or with CSS (preferred, below).

    Shortcode example:
    [etsy-shop shop_name="EXAMPLE" section_id="123123123" columns="999" width="150"]

    CSS overrides

    
/* Etsy plugin responsive overrides */
.etsy-shop-listing-table {
	text-align: center;
}
.etsy-shop-listing-table td {
	display: inline-block;
}
.etsy-shop-listing-table .etsy-shop-listing-card {
	width: 150px !important;
}
.etsy-shop-listing-table .etsy-shop-listing-card img {
	height: auto !important;
}

    Enjoy!

    • This reply was modified 7 years, 2 months ago by dhaupin. Reason: Added img height auto

    Excellent! Much better… still tweaking though, but thank you for that above CSS ??

    @dhaupin Brilliant! The CSS code you suggested by itself fixed the issue. I’m using the Sela theme and works perfectly. Etsy plugin works completely responsive now on mobile.

    Thank you! ??

    Plugin Author fsheedy

    (@fsheedy)

    Please update to version 2.0, this plugin is now responsive!
    Hope you will enjoy and rate the plugin!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive??’ is closed to new replies.