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

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

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

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.