Website Layout Looked Differently In Differently Tablets

Hi,

I was checking out my website today using a different tablet than I usually used, to test out my website. To my surprise, I saw that the layouts on different pages of the website were different. But I will just send you 2 screenshots of just one of the pages, the product detail page. The right layout of that page should have the main photo be full screen, and the buttons, texts and other information should be below the image, but it wasn’t that way on the borrowed tablet I used today. The image was much smaller and to the left, then the buttons, texts and tabs were on the right side of the page. Which made the buttons and texts cut off due to that layout. I would like the original layout of all the pages on the website that I had customized. And on the other pages, instead of the columns being 2, 3 & 4 depending on the page, the columns were more, which made the images on the those pages very small in widths and heights. By the way, both tablet were iPads. But anyway, here are the 2 screenshots of a product detail page on 2 different tablets.

Attachments:

You must be logged in to view attached files.

Hello,

The problem is caused by this custom CSS: https://gyazo.com/c8206edbbcaf8c87ecb0abcddcf641ca

Please remove it and check again.

If you have any questions please feel free to contact us.

Best Regards

Hi,

Thanks for looking into the matter. I don’t currently have a developer at the moment that could remove the css, I would have to hire one to do it for me. However, based on the small video clip you showed me, it still didn’t explained why there are 2 different layouts of the tablet view of the website, especially on the product detail page. The video you sent me only explained why the button and texts were cut of by the pic, due to the css making things a little bit too wide on the right side. The layout of the tablet should be like one of the screenshots I showed you, where the image is full screen(height & width), the the buttons, texts & tabs are below the image. The other layout of the tablet view that you showed in the video should only be if the tablet is in the horizontal position when you turn the device sideways, not the regular vertical position. Did you look into that yet? Thanks.

Hello,

You are checking the site using two different tablet PC with different widths. Your custom is for the large width tablet: https://prnt.sc/1wxezlb and https://prnt.sc/1wxf2eb

Please find and replace these customs for this code:

.single-product-page .summary-inner {
margin-bottom: -20px;
width: 100%;
}
.product-image-summary .single_add_to_cart_button {
width: 100%;
}

Best Regards

Hi,

I’m not sure that you fully understood what I was asking you about. Yes, I saw your previous explanations and video clip concerning the button width and why the button and texts were cut off. It was due to the css used that made it a little bit too wide.

But what I’m also concerned about is the fact that the main product on the product detail page is supposed to be full screen, both width and height on the table, and the buttons, texts and tabs should be below the image like in one of my screenshots above. But when I viewed it on another slightly bigger tablet, it wasn’t that way. It looked more similar to the desktop layout. Tablets have much smaller screens compared to the desktop view, so when it’s in that layout, the main product image looks too small on a tablet. I also checked a couple of other E-commerce websites to see if the layouts of their product detail pages were different on that slightly bigger tablet that I last used, but theirs had the same layouts on both tablets. My regular tablet that I usually use to check the website is a regular size tablet, it’s NOT a mini. And the last tablet that I used was slightly bigger, so I don’t know why things would change so much. It’s not just on the product pages, but also on the category pages and homepage as well. The new tablet showed an extra column in most of the sections on those pages, which made the images look smaller in widths and heights, and the whole point of using a tablet is that you get the opportunity to some of the things bigger on a tablet view.

Please explain to me what the code you just sent me is for, so I can explain it to the developer that I would need to hire to do it. And if possible, please respond back to me as soon as, because sometimes it takes a day or more for me to get back a response. I would like to come to a full understanding about everything, so I could just hire a developer as soon as possible to do everything all at once without any misunderstandings. I hope you understand. Thanks.

Hello,

I do apologize, I have misunderstood you.

We suggested the solution as we see that the content overlays the image. And the custom code we have provided fixes this issue.

WoodMart theme uses different layouts for landscape and portrait view of a tablet PC:

https://prnt.sc/1wyurh6
https://prnt.sc/1wyuvom

Unfortunately, there is no option to change that nor a quick fix to solve that.

If you have any questions please feel free to contact us.

Best Regards

Hi,

I wanted the tablet view to be set a specific way, especially since I paid a developer to have it customized how I thought it was all along. I just stumbled across these differences accidentally a couple of days ago, that I had no idea was even the case. I wasn’t expecting there were 2 different tablet layouts when the device is positioned in its regular vertical position. I always knew that there were 2 different tablet views of websites, one layout when the device is positioned in the vertical position, and another layout when positioned in the horizontal position. But the website have 2 different layouts when positioned in the regular vertical position.

If WoodMart theme uses different layouts for landscape and portrait view of a tablet PC as you stated above, then is there an option to just go with one?

Hello,

There is no quick solution for such an issue. It is not possible to change the layout on all the devices from landscape to portrait globally. We can suggest custom CSS for a single product only. Please let us know.

Best Regards

Hi,

I’m sorry but I didn’t understand the terminology you used previously. When you stated in your last message above that: “It is not possible to change the layout on all the devices from landscape to portrait globally”, what did you mean by “landscape to portrait globally”?

Also, what did you mean by “We can suggest custom CSS for a single product only. Please let us know.”? What did you mean by “single product only”, as far as the issue I mentioned before concerning the product detail page 2 different layouts on the website tablet view?

Hi,

Product page layout does not depend on type, model, or brand of tablet. Product page layout is directly depend on the screen viewport width of the specific device (please check the video https://gyazo.com/c582fc6852e405a8b015aaa97b996d80).

If device screen viewport width is equal or larger than 769px – the product page layout will be placed in two columns (https://prnt.sc/1x9xld0).
If device screen viewport width is equal to or lower than 768px – product page layout will be placed one over another (https://prnt.sc/1x9xmgn).

In your case, one of your tablets positioned vertically has a viewport width larger than 769px and another is equal to 768px or lower, so the product page will be shown in different layouts on different devices because of the difference in viewport width.

Viewport width breakpoint on 768px is chosen because of the Bootstrap grid standard on which our theme is based. Its purpose is to collapse content on a certain resolution and make content responsive and readable on all possible screen widths.

This behavior cant be changed globally, but can be changed on product page via custom CSS. To make proper custom CSS please provide us your tablet’s model name and its viewport width (for example you can use the following resource https://yesviz.com/viewport/). Please, note that “viewport width” and “screen resolution” are not equal values. On modern devices, screen resolution by default is down scaled to viewport width to achieve better pixel density and sharpness.

Kind Regards

Hi,

The larger tablet that I was using at the time that I noticed the product page layout looking more similarly to the desktop layout, was Apple iPad Pro 11”. And based on the link you sent me as reference to look up the viewport width, it stated “834 x 1194” as the viewport width. I don’t know any of this for certain.

Hello,

Try to add the following custom CSS code to the Global Custom CSS area in theme settings to place your product page layout in one column on vertical iPad Pro 11”.

@media (max-width: 850px) {
.product-image-summary-inner > .col-lg-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}

Kind Regards

Hi,

I’ll have to hire a developer to add the CSS for me, because I’m not personally familiar with doing it myself, and I don’t want to cause any errors on the website. Thanks.

Hello,

If you want you can provide the sit credentials and I will insert the code correctly, it is very easy and no sense to find a developer for this purpose. You can insert the credentials into the Private content below the text area.

Best Regards

[Author]

Posts