Joomla Templates Club 406,261 posts

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#198914

Hi there,

The wishlist and compare tables in Mijoshop aren’t responsive and look terrible on mobile, how can I solve this so that my tables are responsive and display properly on mobile devices? See screenshot below,

Thanks

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539436

Hi,

Please open the root_folder/templates/ja_bookshop/css/themes/themedalguy/custom.css file (just create a new file if you don’t have) and add these CSS rules :

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc }

td {
border: none;
border-bottom: 1px solid #eee
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

td:nth-of-type(1):before { content: "Image"; }
td:nth-of-type(2):before { content: "Product Name"; }
td:nth-of-type(3):before { content: "Model"; }
td:nth-of-type(4):before { content: "Stock"; }
td:nth-of-type(5):before { content: "Unit Price"; }
td:nth-of-type(6):before { content: "Action"; }
}

Save and check again.

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#539495

Hi Adam,

Thanks for that, looks much better 🙂 Just one little problem with some text if you see screenshot below where it says “Wishlist” you’ll see there is some text that overlays the heading.

How could I remove that text so that it looks ok?

---

Attachments:

1. 

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#539522

Hi Adam,

Also just realized that the mini-cart’s layout has broken in mobile view, please see screenshot

How can I get this looking like it did originally? Thanks for the help 🙂

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539625

Hi,

So just change the code a little bit should fix both issues :

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.wishlist-info table,
.wishlist-info thead,
.wishlist-info tbody,
.wishlist-info th,
.wishlist-info td,
.wishlist-info tr {
display: block;
}
.wishlist-info thead {
display: none;
}
.wishlist-info tr {
border: 1px solid #ccc;
}
.wishlist-info td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: left !important;
}
.wishlist-info td:before {
min-width: 130px;
display: inline-block;
white-space: nowrap;
}
td:nth-of-type(2):before { content: "Product Name"; }
td:nth-of-type(3):before { content: "Model"; }
td:nth-of-type(4):before { content: "Stock"; }
td:nth-of-type(5):before { content: "Unit Price"; }
td:nth-of-type(6):before { content: "Action"; }
}

Save your file and check again.

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#539654

<em>@Adam M 433160 wrote:</em><blockquote>Hi,

So just change the code a little bit should fix both issues :

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.wishlist-info table,
.wishlist-info thead,
.wishlist-info tbody,
.wishlist-info th,
.wishlist-info td,
.wishlist-info tr {
display: block;
}
.wishlist-info thead {
display: none;
}
.wishlist-info tr {
border: 1px solid #ccc;
}
.wishlist-info td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: left !important;
}
.wishlist-info td:before {
min-width: 130px;
display: inline-block;
white-space: nowrap;
}
td:nth-of-type(2):before { content: "Product Name"; }
td:nth-of-type(3):before { content: "Model"; }
td:nth-of-type(4):before { content: "Stock"; }
td:nth-of-type(5):before { content: "Unit Price"; }
td:nth-of-type(6):before { content: "Action"; }
}

Save your file and check again.</blockquote>

Hi buddy,

Thanks for the help, it’s nearly there please see screenshots below,

There is text that is breaking out of the cart when in responsive mode, also has the extra text in “subtotal” area “product name”

Everything seems to be floated right in the tables and the text is breaking out of the table.

If we can get these 2 bits sorted that would be great and I appreciate all the help 🙂

---

Attachments:

1. 
2. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539809

Hi,

In this case, we will apply responsive adjustment for Wishlist table only, so update the previous code a little bit as follows, it should work:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.wishlist-info table,
.wishlist-info thead,
.wishlist-info tbody,
.wishlist-info th,
.wishlist-info td,
.wishlist-info tr {
display: block;
}
.wishlist-info thead {
display: none;
}
.wishlist-info tr {
border: 1px solid #ccc
}
.wishlist-info td {
border: none;
border-bottom: 1px solid #eee
position: relative;
padding-left: 50%;
text-align: left !important;
}
.wishlist-info td:before {
min-width: 130px;
display: inline-block;
white-space: nowrap;
}
.wishlist-info td:nth-of-type(2):before { content: "Product Name"; }
.wishlist-info td:nth-of-type(3):before { content: "Model"; }
.wishlist-info td:nth-of-type(4):before { content: "Stock"; }
.wishlist-info td:nth-of-type(5):before { content: "Unit Price"; }
.wishlist-info td:nth-of-type(6):before { content: "Action"; }
}

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#539846

<em>@Adam M 433438 wrote:</em><blockquote>Hi,

In this case, we will apply responsive adjustment for Wishlist table only, so update the previous code a little bit as follows, it should work:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.wishlist-info table,
.wishlist-info thead,
.wishlist-info tbody,
.wishlist-info th,
.wishlist-info td,
.wishlist-info tr {
display: block;
}
.wishlist-info thead {
display: none;
}
.wishlist-info tr {
border: 1px solid #ccc
}
.wishlist-info td {
border: none;
border-bottom: 1px solid #eee
position: relative;
padding-left: 50%;
text-align: left !important;
}
.wishlist-info td:before {
min-width: 130px;
display: inline-block;
white-space: nowrap;
}
.wishlist-info td:nth-of-type(2):before { content: "Product Name"; }
.wishlist-info td:nth-of-type(3):before { content: "Model"; }
.wishlist-info td:nth-of-type(4):before { content: "Stock"; }
.wishlist-info td:nth-of-type(5):before { content: "Unit Price"; }
.wishlist-info td:nth-of-type(6):before { content: "Action"; }
}
</blockquote>

Hi Adam,

Thanks for the help, but it’s all the tables that should be responsive as they are now. The only problem is the mobile view for the drop-down cart, you’ll see in my previous posts that the mobile cart view doesn’t display properly. All I need to do is fix the cart for mobile and the site is then good to go.

Thanks,
Richard

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539960

Hi Richard,

Yes, the updated code above use to fix the problem in mini-cart. In wishlist table, we need extra content to represent as title meanwhile in mini-cart, we don’t.

1 user says Thank You to Adam M for this useful post

1. gringo211985

[Author]

Posts