Joomla Templates Club 406,261 posts

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#192554

Hi,
I use JA Fixel for a responsive website. When I tested the shopping cart page, I found if the screen width is less than 440px, the right column will be cut. If the screen width is less than 360px, the second right column which is the total will be cut. Because 320px is the iphone portrait width, so I think this is big problem.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#513676

Hi Henry,

I would like to answer your questions in detail as follows:

<blockquote>I found if the screen width is less than 440px, the right column will be cut</blockquote>

Truly, our devs just defined the responsive of template elements on the standard device resolutions (i.e 480px – iPhone landscap view), it is not easy to find a real device with 440px width screen. Anyways, you can try to create a custom.css file at templates/ja_fixel/css/ path and put below css styles override into:

@media (max-width: 480px) {
body {
padding-left: 0;
padding-right: 0;
}
}


<blockquote>If the screen width is less than 360px, the second right column which is the total will be cut. Because 320px is the iphone portrait width, so I think this is big problem.</blockquote>

By default, the cart of JoomShopping is defined within the <table>, <td>, <th> tags so that it will not be responsive flexibly as the <div> tag does. You can make this layout look better on mobile view (portrait) by putting below codes into custom.css file too:

@media (max-width: 321px) {
table.cart th,
table.cart td {
padding: 5px 3px;
font-size: 12px;
}

.jshop .cart .product_name a,
table.cart tr.jshop_prod_cart td {
font-size: 12px;
}
}

Note: Due to the limited responsive effect of JomShopping’s cart elements, our suggested codes will make the cart page look well on the real device resolutions: 320px, 480px, 600px, 768px …

[Author]

Posts