Jump to content

How to format/optimise page sections and navigation bar for tablet?

Recommended Posts

Hi, I have almost finished optimising my website for mobile devices by creating a copy of each page section for mobile and formatting it to look good on mobile. I have then used the following code extensively to make sure that the mobile version only appears on mobile and the desktop version only appears on desktops.

@media only screen and (min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

However, I am struggling to make my website look good on tablet. On my ipad it seems to force the desktop view in landscape orientation and the mobile version in portrait orientation. I feel that the site could look much better honestly on tablet at present. One issue includes the nav menu dropdown links overlapping on landscape orientation. Is there a way to optimise for tablet effectively?

Is it possible to force the mobile version on tablet so that there is a hamburger menu in both portrait and landscape orientations?

All I can think to do is again create a copy of each page section, format them so that they look good when viewing the website on my tablet then adding code so that only the tablet versions show up on my ipad. Is this feasible? I feel there must be a better way to get around this issue.

Thanks

Atmos

Link to comment
21 hours ago, atmos said:

Hi, I have almost finished optimising my website for mobile devices by creating a copy of each page section for mobile and formatting it to look good on mobile. I have then used the following code extensively to make sure that the mobile version only appears on mobile and the desktop version only appears on desktops.

@media only screen and (min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

However, I am struggling to make my website look good on tablet. On my ipad it seems to force the desktop view in landscape orientation and the mobile version in portrait orientation. I feel that the site could look much better honestly on tablet at present. One issue includes the nav menu dropdown links overlapping on landscape orientation. Is there a way to optimise for tablet effectively?

Is it possible to force the mobile version on tablet so that there is a hamburger menu in both portrait and landscape orientations?

All I can think to do is again create a copy of each page section, format them so that they look good when viewing the website on my tablet then adding code so that only the tablet versions show up on my ipad. Is this feasible? I feel there must be a better way to get around this issue.

Thanks

Atmos

Besides the min-width query, we can have the useful attributes called orientation  which have 2 following options:

- Landscape
- Portrait

Here is some use cases you can check it on: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

you can try using the following custom css

@media screen and (orientation:landscape)
  and (min-device-width: 319px) 
  and (max-device-width: 480px) {
    /* Your CSS Here*/
}

Let me know how it works on your end

 Press 👍  or mark my comment as solution if you find my sharing usefull

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
On 7/6/2024 at 5:08 PM, HoaLT said:

Besides the min-width query, we can have the useful attributes called orientation  which have 2 following options:

- Landscape
- Portrait

Here is some use cases you can check it on: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

you can try using the following custom css

@media screen and (orientation:landscape)
  and (min-device-width: 319px) 
  and (max-device-width: 480px) {
    /* Your CSS Here*/
}

Let me know how it works on your end

Hi, I don’t think this worked for me but I found a great free plugin called "Fix Fluid Engine's "In-Between" Screen Size Spacing Issues” for Google Chrome which allowed me to easily edit the mobile landscape orientation design whilst retaining the portrait orientation design. This seems to have improved the tablet view too.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.