Post by Opencartleerling » Thu Mar 17, 2016 8:26 am

Hello all,

With the help of another forum member (Tverhijen) I managed to create a mobile view for my own phone in the stylesheet.

CSS is very new for me and I am stuck with a few questions.

1. How do I get button-group (add to cart, wishlist, compare) to always display on the bottom of the product-thumb?

In order for the products to be aligned properly in this mobile view I in product-thumb have created a max-height and min-height. The products are now aligned perfectly, but since the products are aligned the button-group is no longer always at the bottom.

The below code is strictly for the view of my phone (galaxy s6) to test things out before totally messing up my entire stylesheet.

Code: Select all

@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4) {
  .product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
	text-align: center;			
	min-height: 35px; 			
	max-height: 35px; 			
}
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
	border-radius: 6px 6px 6px 6px; 			
	border-style: dashed dashed solid dashed; 	
	min-width: 160px;							
	margin: 5px;								
        padding: 0px;							
	min-height: 386px; 							
	max-height: 387px; 							
}
.product-thumb .button-group {
	border-top: 		1px solid #ddd;
	border-bottom: 		0px solid #ddd;
	border-left: 		1px solid #ddd;
	border-right:		1px solid #ddd;
	background-color: 	#eee;
	overflow:                  visible;
	display:                     block;		
}
.product-thumb .caption { 
	padding: 0 20px;
	min-height: 180px;
	text-align: center;			
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
Second question.

2. How do I properly use margin? (or whatever it is I should be using)


I now in this mobile view have no empty space on the right side of the products (grid, 2 products per row) while I have too much empty space between the products and on the left of the products. So far I failed to change this, so I think I am editing the wrong things in the wrong places.

Any help is highly appreciated!

Kind regards,
Bart

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by Adrien » Fri Mar 18, 2016 12:16 pm

I've yet to delve into OC stylesheets to give you any particulars, (will be doing that this weekend) but as a general rule, I'd avoid using px and opt for em. Also, avoid declaring height if at all possible. You may need to change the overflow property on some containers however if not having a height is a problem. By not declaring a height and specifying ems for sizes (even for images) you let the browser determine the proper ratios and let it do the calculations necessary. It will float (unless told otherwise) the content appropriately so everything looks peachy. There are plenty of resources on the web concerning 'responsive' and 'mobile-first' design.

Good luck.

*note, a quick glance at your code and I see a giant margin-left at the end. I'm sure that doesn't help.
Also, note the padding in the top section of 0 15px. That means Top and Bottom have 0, and Left and Right have 15px. Try:

Code: Select all

padding: 0 15px 0 15px;
Explicitly setting each one might help you isolate the issue changing only one at a time. (the order is Top,Right,Bottom,Left)

Finally, if using any modern browser, you should have developer extensions installed already by default. Inspect the elements and see what css rules are being applied, overridden, etc. You can also select the Responsive option and set your screen resolution to the same as your phone and test things out there.

Newbie

Posts

Joined
Tue Dec 29, 2015 5:36 am

Post by Opencartleerling » Wed Mar 23, 2016 12:16 am

Thank you for the reply.

Unfortunately I still did not manage to find the problem. I have changed and removed the margin and padding as suggested but with no luck. In fact nothing on the view changed which I find a bit strange. Maybe this is something I can't change in the stylesheet.

If someone can point me in the right direction i'd really appreciate it.

The url is
https://www.sieradendirect.nl/kettingen

The device I am testing the view on has a width of 360px.
What I want is the products to be perfectly aligned under the menu, search etc. I know that by removing min-width on the product-thumb it looks good again, but I simply do not want all that empty wasted space. There should be enough room on the page for the min width I have. If I make the min-width smaller it first creates more empty space between the products, and when I make it even smaller again the products are aligned under the menu again (2 per row), but I don't like the way this looks with all the empty space.

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by cyclops12 » Wed Mar 23, 2016 6:04 am

within @media screen and (device-width: 360px)
.product-thumb {

have you tried changing

Code: Select all

margin: 5px;   
to

Code: Select all

margin: -5px;   

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Opencartleerling » Thu Mar 24, 2016 5:36 am

Thank you, using - before margin is something I didn't know was possible.

With your help I did this

Code: Select all

margin-left: -14px;				
margin-right: -14px;
margin-top: -9px
margin-bottom: 10px;
It now looks very good, I have no empty space between the products. The only downside is I also have no empty space on the sides :P
If I change the margin left or right it first creates empty space between the products before creating empty spaces on the sides. It looks much better than it did before, but does anyone have ideas how I can create empty space on the sides while keeping no space between the products? With my very basic knowledge I would usually try to use the margin-left and margin-right commands but I am already using those

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by cyclops12 » Thu Mar 24, 2016 5:59 am

You could add

Code: Select all

.row {
	margin-right: -10px;
    margin-left: -10px;
}
within @media screen and (device-width: 360px)

adjust to suit.

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Opencartleerling » Thu Mar 24, 2016 8:22 am

Thanks again for the quick reply.

When I tried this it also changed the width of the logo, sort by, search etc.

In order to get 2 products per row on mobile view I in common.js changed

Code: Select all

$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
into

Code: Select all

$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
I figured that maybe I should use #content .col-xs-6 instead?

I have tried this, but with no luck so far. If I add any margin I no longer have 2 product per row, but only 1.
I have tried numerous options. First with 5px margin, with 19px margin to compensate for the negtative margin on the product thumb and more. I have also removed the min-width from the product-thumb to make sure that did not cause any trouble.

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by cyclops12 » Sat Mar 26, 2016 4:59 am

Unless anyone else has a better idea i would change the class "row" to "row_products" for example then add

Code: Select all

.row_products{
	margin-left: -10px;
	margin-right: -10px;
}
into your stylesheet within your @media screen and (device-width: 360px)

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Opencartleerling » Sun Mar 27, 2016 12:43 am

Unfortunately .row-products did not change anything for me.

While typing this post I found the correct answer! :D Finally!

The answer is in the left and right margins for the product-thumb combined with #content .col-xs-6. Changing margings on those does change things in the view.

I now have

Code: Select all

.product-thumb {	
	margin-left: -14px;				
        margin-right: 0px;
}

and 

#content .col-xs-6{
	margin-left: 14px;
	margin-right:-28px;
	}
Using negative margin on the product-thumb does increase the width of product. I have only applied the negative margin in the left on the product. In order for the products to be alligned under the category menu I need to apply the same positive margin on #content .col-xs-6.

In order for the products to also be alinged on the right side I have to add negative margin in #content .col-xs-6, twice the amount of the nagative margin I use on the product thumb because I have 2 products per row. In this case it's -28px because both my products have -14px.

I have 1 more additional question

Because my product-thumb is now slighly smaller (it was eating up 100% of the screen width before) I now have to apply a min-height for the product-thumb so my products are not all over the place, but in straight rows. That's no problem, but when I do this the buttons are not on the bottom of the product-thumb. How could I make sure they are?

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by cyclops12 » Mon Mar 28, 2016 12:10 am

You could try viethemes product layout fix.....will try to find the link for you

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Opencartleerling » Tue Mar 29, 2016 7:10 am

cyclops12 wrote:You could try viethemes product layout fix.....will try to find the link for you
I found the extension, but nothing at all changed for me after adding the code.

His extension can be found here
http://www.opencart.com/index.php?route ... search=row

Checking out the products in his demo store it doesn't seem to work properly either.
I checked it in chrome and firefox and it looks really messy on both.

For the demo see
http://demo.viethemes.com/opencart2/ind ... ry&path=20

No disrespect to viethemes, I read a lot of his posts and am using one of his extensions he is great, but this particular extension doesn't seem to do anything for me.

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by cyclops12 » Wed Mar 30, 2016 2:27 am

Hiya, the only problem i can see now are the products slightly out of alignment.....
product-align1.JPG

product-align1.JPG (81.22 KiB) Viewed 4429 times

This can be solved by removing min-height like this

Code: Select all

@media (max-width: 767px)
.product-grid .product-thumb .caption {
    /* min-height: 0; */
    text-align: center;
}
product-align2.JPG

product-align2.JPG (79.95 KiB) Viewed 4429 times

Or is there something else ??

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Opencartleerling » Wed Mar 30, 2016 11:02 pm

Thanks for the reply, i'll test that out tomorrow.

I know I'm a bit of a antfucker, but I try to get the design exactly as I want it before adding all the products, I just added a few to test things like this.

How I tried to solve it earlier is by adding the same min and max height so the products would be perfectly alinged. That caused buttons on the category page to float within the product thumb instead of being at the bottom of the box so that was not a very good idea of mine ;)

Would you say it's better to not use min and max height at all?

I was planning on adding the same min and max height on;

.product-thumb h4
.product-thumb .button-group,
.product-thumb .caption
.product-thumb .rating
.product-thumb .price
.product-thumb .price-tax

My theory was this would cover everything and aling all the products perfectly, including prices etc. I would do this for all views. Should that work or does it sound like a bad idea?

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by artcore » Thu Mar 31, 2016 12:02 am

The problem mostly comes up when titles length becomes multiple lines making the box grow larger in height and you have to take into account the special price which also adds an extra line to the height.

I would use overflow-x hidden, text-overflow:ellipsis on the titles in stead of hiding it with a max height. This would display a long title like: Apple Cinema Tele...
The description length is an admin setting so easily fixed by adding a min-height to it.

I had a similar fight with this :)
Screenshot_2016-03-30-18-01-10.jpg

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+ ;D

Thanks!


User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands
Who is online

Users browsing this forum: No registered users and 149 guests