Tablet Website Layout Issue On 11” Tablet

Hi,

I was using an iPad Pro 11” tablet about 2 days when I noticed some layout issues while in the My Account area. I also saw some other issues elsewhere on the website as well. It seems as though there are officially 4 website views, and I which I was aware of this from a long time ago while the website was being setup. Hiring a developer right now to fix all these unexpected things will be very difficult for me, because it’s going to cost me a lot of money. I just don’t understand why a tablet with this size, even though it’s a little bit bigger than the average size tablet, would have the images and layouts appear very small and even smaller than they appear in regular size tablets which are smaller, and sometimes narrow. It’s not as big as a laptop or desktop screen, so I think the layouts would be better set the same as the regular size tablets.

On my homepage main slider, the shop now button overlapped into the texts next to it, when it perfectly fine on the other 3 devices. And, on the “Referrals” page on my website, the 3 circles and texts are not aligned on the same levels.

The login/Register fields appear very smaller in widths than they do on the other 3 devices.

The categories listed on the tabs of the My Account area extended to the next line, and the black background that is seen on the selected tab is very short in width and cut the texts off where you can’t see the entire words. I think the My Account tabs should appear on top, then the other contents and my account pages should be below the tabs area, like on the mobile and regular tablet view. Please take a look at the website then let me know what could be done. This is very urgent because it’s embarrassing to know that viewers using an iPad Pro 11” tablet or another brand tablets with similar size could visit the website and see all these errors. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide us your admin access so we can log in and check this on your side.

Thank you in advance.

Hi, the admin credentials are down below. Thanks.

The problem is caused by the Custom CSS you added to Theme Settings https://gyazo.com/bacee0c0df6b52503b02ab58752cdc86
Please, remove it and see how it works.

As for the problem with the plugin, please, send us a screenshot of how it works with the default WordPress theme.

Hi,

I saw the video clip you sent me, showing why the black tabs bar for the My Account area appeared less wide when it should be wider, and also why the texts overlapped to the next line. However, I don’t want to hire a developer to remove the CSS yet, if it may affect how the bar on the other devices look. Did you checked to see after you disabled it, if it affected the width of the black bar on the other 3 devices, including the regular tablet view, since I’m only seeing this and other errors throughout the website on the 11″ tablet?

The layout of the My Account area is setup as the layout of the desktop view, when the tablet’s screen in the vertical position is way smaller. I had some other issues with the way the main image on the single product page looked on the 11” tablet view a few weeks ago then another one of your staff members gave me a CSS to change it to a carousel, so the layout would resemble the one in the regular tablet view. Maybe changing the layout through CSS for the My Account area so it would look like the one in the regular tablet view would automatically fix the My Account errors, without me having to hiring a developer to disable the CSS you mentioned above, which would still not fix all the issues in the My Account area.

I’m also especially concerned with the way the “Affiliate” page look towards the bottom of the page. The texts are seen in a straight line and the words are not readable. No custom css was added to that page as far as I know, because it’s from a new affiliate plugin that I just setup about 3 weeks ago.

There are few more issues that I noticed throughout the website that i don’t notice on the regular size tablet, phone and desktop view. I noticed that on the “Referrals” page, listed on the header menu, that using the 11″ tablet, the 3 circles, the 3 titles under the circles, and the gray texts below the titles are not on the same vertical lines when using the 11′ tablet in the vertical position, but when I turned it in the horizontal position, everything was fine.

Something else that I noticed is that the fields & buttons on the Login/Referrals page on this 11″ tablet showed the fields and buttons much smaller in widths that the way they look on the other 3 devices, including the regular tablet view. Again, when the tablet in the horizontal position, everything looks fine, but while it’s in the vertical position, you’ll see that the fields and buttons are smaller in width. I just don’t see how that one CSS you pointed out to me in your last message could be affecting all these other things. 

Lastly, you asked: “As for the problem with the plugin, please, send us a screenshot of how it works with the default WordPress theme”. What did you mean by that? I don’t remember discussing a plugin issue.

Attachments:

You must be logged in to view attached files.

Hello,

The fact is that that custom CSS is not a part of our theme and fixing any code added by you or your developer is out of our theme support scope.

Affiliate pages are part of some additional plugin and it is not a default WordPress or WooCommerce functionality. That is why, please, test how it works with the default theme first and send us some screenshots.

Kind Regards

Hi,

I did not asked you to fix any code added by me or my developer as you’ve stated. I don’t actually think that the CSS codes the developer used to customized the website necessarily needed to be altered. I think the problem is how the developer(s) of your theme setup the website where if you used a device bigger than the average size tablet, the layout of the website starts showing differently all over the website. I first became aware of this a few weeks go, when I first visited the site using an iPad Pro 11” tablet for the first time. I was very disappointed with the layouts all over the website, especially the homepage, and single product pages. I spent a lot of time and money to have the website customized the way I wanted it to look. I had no idea that there was a 4th website view, I only knew about 3. The desktop view, tablet (regular) view, and the mobile view. Instead of the images and other contents appearing bigger on the 11” tablet view than even the regular size tablets, everything seemed to look way smaller on the 11” tablet I used.

I just wanted to know if you could provide your own CSS that would could fix the issues, especially the My Account area, and what I could do about the other issues, especially since I believe these issues are due to the theme’s setup of a website when viewing it from a tablet larger than the average size. I contacted your support team a few weeks ago about the issues I had with the small images of the main product on the product detail page for the bigger tablet view, then the support team member gave me a CSS to make the main product on the 11” tablet a carousel, just like the regular tablet view for the single product page. So, I didn’t think bringing up CSS related to this would offend you.

As for the affiliate plugin, the texts at the bottom of the page being in a single line and unreadable, I think this too is due to the layout of the My Account page for the bigger tablet view. If the tabs were on the top then the pages were setup below the tabs like the mobile and regular tablet view, then this would probably not be a problem, because it’s fine on the other 3 website views. Besides that, the right side of the My Acount area where the pages are looks a little bit too narrow like things are squeezing together just to fit, tabs on the left and the pages on the right. Again, I believe viewing a website on a bigger tablet view like an 11” should look bigger, not smaller or narrowly fitted. I’ve even checked out other E-commerce websites using the same 11” tablet, and I didn’t see similar issues, things appeared bigger as expected.

Hello,

Initially, you send a screenshot about the my account problem https://gyazo.com/076006053777af507e2a7bc8442d58b4
And we found that it is caused by the custom CSS added by your developer https://gyazo.com/bacee0c0df6b52503b02ab58752cdc86

Remove it first and check how it works. If you still have any problems, let us know.

Again, as for the Affiliate plugin, please, test how it looks with the default theme (not WoodMart) and send us a screenshot to see if it is caused by WoodMart or not.

Kind Regards

Hi,

What you stated in your last message above is not quite accurate. I actually stated in my first initial message that I was having other issues on the website outside of My Account area. However, I sent you 4 screenshots showing the My Account issues that concerned me, including one screenshot from the homepage main slider, not just one screenshot showing only the black bar being shorter width and cutting of the texts in the My Account tabs area, you just happened to have focused solely on that. I also didn’t want to send too many screenshots all at once, then they go past the maximum file size limit then fail to upload.

I mentioned the other things that concerned me overall about the view of the website on a big tablet view, because you implied that it wasn’t really apart of you support team policy to help with the issues. Issues that I thought showed themselves when only viewing the website in the 11” tablet I used, and probably other bigger size tablets as well. It’s like having a 4th website view to have to customize, which is not really fear to me, because I only knew all along about 3 website views: desktop, regular tablet view & mobile view, and so was the developer. I only first came to the realization about the 4th view of the website about 4 weeks ago when the website was already setup. I never thought at that time to check the My Account area back then, I just noticed a bunch of other issues on the homepage and single product page layouts that concerned me at that time.

As for now, I recently hired a developer to remove the code you told me to remove for the My Account area, but he doesn’t know which code to remove from the video clip you sent, and he thinks the codes are Woodmart related and would break the site if removed. Please send me the exact code you told me to remove and where to remove it. I only have a limited schedule time set to work with the developer, so please respond back to this as soon as possible. Thanks.

Hi,

The developer said he’s having some issues with the console after he tried to fix some things on the website. He said he made the updates then after saving them, he’s not seeing the changes. The cache plugin is disabled so I don’t know why he’s experiencing these issues. He first tried to create less space at the bottom of the “Referrals” page the regular way through the website, but when it didn’t worked, then I think he tried to use CSS to do it, then after saving it at the end, but he didn’t see the changes. He also edited the 2 contact forms on the Login/Register page for the bigger table view, because the fields and buttons are really small in widths than they should be, then he saved it, but he didn’t see the changes neither. I also asked he to edit another error seen in the bigger tablet view, but he said the problem will be the same because he would have to use CSS in the console, which seemed to be the problem.

Lastly, I left you another message a couple of days ago, but I haven’t gotten back a response on that as yet. In that message, I also mentioned that the developer didn’t know which CSS you suggested to remove from the video clip you sent previously. He thinks all the CSS are Woodmart related and would break the site if any were removed, which I told him the one you said to remove was not Woodmart related. Please give me the exact custom CSS code you said I should remove, and where to remove it. I’m really hoping I will here back from you as soon as possible by Monday the latest, because I don’t have long with the developer and I would like all the errors fixed before he’s scheduled to leave. Thanks.

Hello,

1. Here is a screenshot of the custom code that breaks the sidebar on my account https://prnt.sc/20y52v4

2. And the one that breaks the “Billing address” spacing https://prnt.sc/20y52v4

Let me know if you still have any problems saving your custom CSS.

Kind Regards

Hi, are you saying that it was the same custom css that broke both the sidebar on the My Account area & same one that broke the “Billing Address” spacing, because you gave me the same css for both of them?

Hello,

Sorry, I sent the wrong link to the second screenshot. Here is the right one https://prnt.sc/20y53xd

Hi,

I gave the developer this instructions you gave to me, but he said the URL was already set to HTTPS in the dashboard, and he thinks it would be better for me to have you take a look at the issue further, especially since you offered to if the instructions you gave didn’t work. I would appreciate it if you could check it out for me as soon as possible, so the developer could fix all the issues he’s having problems with in the console with different CSS he tried when trying to fix some of the website errors. Because he only has a short scheduled time left to complete the job. Thanks.

Hi,

Sorry, but what do you mean by was already set to HTTPS in the dashboard? We didn’t write anything about HTTPs. How it is related to your custom CSS?
Did you/he try to remove the indicated CSS from Theme Settings?

Kind Regards

Hi,

I checked my emails this morning and I saw 2 responses from you under the same topic. You told me to check the HTTPS in dashboard. Please take a look at the screenshot.

Attachments:

You must be logged in to view attached files.

Oh, sorry. Probably, this reply was wrongly posted on this topic. I have checked this issue already and clarified that it is fine and then removed this reply.

Oh ok, so did you see the other message I sent you over the weekend? He’s having issues when he added CSS to the console to fix some of the website errors. He’s not seeing the changes.

This:

The developer said he’s having some issues with the console after he tried to fix some things on the website. He said he made the updates then after saving them, he’s not seeing the changes. The cache plugin is disabled so I don’t know why he’s experiencing these issues. He first tried to create less space at the bottom of the “Referrals” page the regular way through the website, but when it didn’t worked, then I think he tried to use CSS to do it, then after saving it at the end, but he didn’t see the changes. He also edited the 2 contact forms on the Login/Register page for the bigger table view, because the fields and buttons are really small in widths than they should be, then he saved it, but he didn’t see the changes neither. I also asked he to edit another error seen in the bigger tablet view, but he said the problem will be the same because he would have to use CSS in the console, which seemed to be the problem.

We tested this on your website but didn’t notice them. Please, send us some screenshots of this “console error” and steps on how to reproduce it.

Hi, the developer just stated that whenever he tried to make changes using CSS to fix certain things, then saved the changes afterwards, the updates are not seen. I’ll ask him for screenshot(s) now to see if that would help you better understand. Thanks.

Hi,

The developer said he input some code on woodmart > custom css > & also theme setting > custom CSS.

See below for one of the things he tried to update for the bigger tablet view (not the regular tablet view), but he didn’t see the changes afterwards.

Attachments:

You must be logged in to view attached files.

Hi,

The developer told me that the code you told me to remove that broke the My Account sidebar, was not responsive after he removed it. I could still see the same sidebar errors, so I don’t know why he’s having responsiveness issues when both removing CSS and adding CSS when it’s time to make changes to the website. I don’t know if he removed the right CSS or he may have done it incorrectly. Please take a look at the screenshot he sent me, claiming that he removed the CSS you said was causing the issues with the sidebar.

I also sent you another message earlier today with a screenshot and the steps he took with the other issues he said he was facing, that you asked for. Please see the last message I sent you above if you were not aware of it. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

We have removed the code four without any issues https://prnt.sc/212qj01
Please, check it from your end now.

Kind Regards

Hi, I checked the sidebar using my 11” tablet (bigger tablet), and the sidebar issue is still visible. I also cleared the cache on my tablet and checked it in Incognito, but the problem is still there. Also, the cache plugin was disable on my website about a week now, so I don’t know why you’re seeing something differently than I am.

It looks like you resaved Theme Settings and returned the custom code. I have just removed it again. Please, take a look at my account sidebar again.

Kind Regards

Hi,

I didn’t re-save the custom code in theme settings, and as far as I know, the developer didn’t try to edit anything in that area after you told me why removed the code. Anyway, I just checked the My Account sidebar on the bigger tablet view and everything looks fine, so thank you very much for that. However, I just checked the regular tablet sidebar, and it’s centered in the middle instead of the far left side like before the css was removed. Is that the default look after removing the CSS, because I thought it would’ve remained on the left side?

Attachments:

You must be logged in to view attached files.

Yes, it is also caused by the custom CSS code https://monosnap.com/file/Zfr5I7i4sIYJ727LmIkGn3npWLFVls

So, are you saying that if I removed the code with the word “center”, or have a developer alter it, the sidebar for the regular tablet My Account area would go back to the left side? Or did you mean something else?

This code makes all links centered. It doesn’t change the sidebar position to the left.
It is how our theme looks by default and you can verify that on our demo.

Hi, so the reason the My Account sidebar on the bigger tablet broke, was due only to the fact that the code positioned the regular tablet sidebar over to the left side?

[Author]

Posts