Improve Website for Tablet View

  • Badgerman
    June 25, 2026 at 2:39 am

    Hi. I’m near finishing building a florist website using GP’s “Prime” e-commerce starter site with WordPress, GeneratePress Premium & GenerateBlocks.

    I think I have created mostly suitable layouts for Mobile & Desktop visitors to my website. However, I think I need to do a bit more for the Tablet & Mobile visitor experience. Please could you help me.

    So far, I have …
    (a) viewed & adjusted content in the Tablet view (mode) & Mobile view (mode) on most individual pages
    (b) increased the Mobile breakpoint in the Customizer, for my Primary Navigation menu, from 768px to 1200px (because I have quite a few items in the menu), to make the my Primary Navigation menu as an Off Canvas Panel on Tablets (when held in Portrait shape), opened via a “Hamburger” Mobile Menu Label called “Product Menu”.

    FOR TABLETS (held in PORTRAIT shape), the Secondary Navigation Menu (About, Payment, Delivery, etc) appears on two rows, left aligned
    – Please could you tell me how to make the those rows/menu items center aligned

    FOR TABLETS (held in LANDSCAPE shape), one page in particular on my website seems badly affected by viewing in Tablet (Portrait) shape – https://isanflowers2.com/shop/
    – Unlike in Desktop view, the Left Sidebar (containing my Product Filter functionality, provided by a plugin) gets its left edge “padding” reduced/removed, which makes the text in the Left Sidebar too close to the edge of the screen for comfort i- If I change my Layout Element for the page from `1400px to 1200px it looks fine, but that makes the layout too narrow on Desktop (bigger screens)
    – Please could you offer me a solution for that (I think the same thing is happening on all pages)

    FOR MOBILES … At the moment, Navigation Dropdown on Primary Navigation Menu (“Product Menu”) on Mobile works like Click – Arrow, while Tablet works as Click – Menu Item & Desktop works as Hover
    Please could you tell me how to …
    – make the Primary Navigation Menu on Mobile work as Click – Menu Item, while keeping Tablet as Click – Menu Item & Desktop as Hover (when I change Navigation Dropdown in Customizer, Layout, Primary Navigation while in Tablet or Mobile view, it also changes the setting in Desktop view)
    – also make the Secondary Navigation Menu on Mobile as Click Menu, while keeping Tablet as Click Menu Item & Desktop also as Click Menu Item

    Do you think I should also …
    – I add some CSS to complement/enhance (b) above?
    – add a Viewport Meta Tag?
    – add Orientation Media Queries in my Additional CSS?
    – anything else you recommend?

    My website for reference … https://isanflowers2.com

    Many thanks in advance

  • Ying
    June 25, 2026 at 8:36 am

    Hi there,

    – Please could you tell me how to make the those rows/menu items center aligned

    Try this CSS:

    .secondary-navigation .main-nav>ul {
    justify-content: center;
}

    – Please could you offer me a solution for that

    Go to Customizing > Layout > Sidebars, adjust the Widget Padding.

    – make the Primary Navigation Menu on Mobile work as Click – Menu Item, while keeping Tablet as Click

    Not sure I fully understand, but try setting primary parent menu items’ links to # instead of empty.

    Do you think I should also …

    I don’t know what you mean. What are you trying to achieve?

  • Badgerman
    June 25, 2026 at 9:40 pm

    Hi Ying

    Thank you very much for your reply.

    ——————————–
    – Please could you tell me how to make the those rows/menu items center aligned

    Success. That CSS worked. Many thanks

    ——————————–
    – Please could you offer me a solution for that

    I’ve tried changing the Left Padding via Customizing > Layout > Sidebars, adjust the Widget Padding. but it seems to have no effect – see screenshot at https://i.postimg.cc/SNytCc27/Widget-Padding-no-effect.jpg
    Please see below a couple of photos of my tablet showing the problem I’m trying to solve (see left edge of screen, compared to how the screen looks on Desktop)
    – https://i.postimg.cc/76tb93PL/Left-Sidebar-on-Tablet-1edited.jpg
    – https://i.postimg.cc/NGV5rkPR/Left-Sidebar-on-Tablet-2edited.jpg

    ——————————–
    – make the Primary Navigation Menu on Mobile work as Click – Menu Item, while keeping Tablet as Click

    Success. Making parent menu items’ links as # worked. Many thanks
    (“Custom Link” [Parent] menu items on Primary & Secondary menus (e.g. Flower Types, Help & Advice) now expand when clicked anywhere on the item – instead of needing to click on the arrow at the far right edge of the Menu Item)

    ——————————–
    Do you think I should also …

    What I meant was, after looking at the Google Search result below …

    https://www.google.com/search?client=firefox-b-d&q=how+optimize+website+for+viewing+on+a+tablet+when+rotate+from+portrait+to+landscape

    … whether I need to do some of those things?

  • Badgerman
    July 4, 2026 at 7:09 am

    Can you help?

  • Alvind
    July 5, 2026 at 9:30 pm

    Hi there,

    For the tablet breakpoint widget spacing issue, try adding this CSS:

    #left-sidebar {
    margin-left: 20px;
}

    Regarding the orientation media query, I don’t think it’s necessary in this case. An orientation-specific media query would only be needed if you wanted the layout to change significantly between portrait and landscape modes.

  • Badgerman
    July 10, 2026 at 9:14 pm

    Hi Alvind

    Thank you very much for your reply.

    Success! I am very pleased to confirm that CSS fix my issue

    Understood about the orientation media query

    Best Wishes

    Simon

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.