Luma product page tablet layout

[gzagza]

Hello all.

I'm looking basically, to try and retain the mobile breakpoint/layout in luma, to apply to the tablet(portrait) view...

On an iPhone 6 for example, the layout is media (with bullet navigation), followed by product info, all 100% width. Then when we switch over to tablet portrait, it seems to use the desktop breakpoint. Meaning that the media and info are both 50% and floated - to me this is just a bit too crammed, and leaves a load of unnecessary whitespace.

Do I have to change the global breakpoints to achieve this? Or is there a simpler solution?

It would also be nice to have the mobile/hamburger menu and header in tablet portrait too.

Kind regards,

Gary

[Stu583]

Hi @gzagza

You could try these in your _theme.less override file.

@media all and (min-width: 780px), print {
	.abs-product-options-list-desktop dt,
	.block-giftregistry-shared .item-options dt {
	clear: left;
	float: left;
	margin: 0 10px 5px 0;
}

@media only screen and (max-width: 780px)
.navigation .level0 > .level-top {
    font-weight: 700;
    padding: 8px 40px 8px 15px;
    text-transform: uppercase;
    word-wrap: break-word;
}

There may be a few more that you need to tweak but this seems to work for the default Luma theme.

All this has done is:

1. changed the minimum width of the product page (was originally 768px)

2. Changed the maximum width of the "burger burger" menu will show (Again originally 768px)

Hope it works for you and helps 🙂 

Stu