How to move elements slightly higher on tablet only

Hi,

I am pretty happy with my desktop layout but I think it could look better when viewed on tablet (mainly lanscape orientation on iPad). I would like to edit part of the tablet version without editing my desktop layout. I can’t seem to find a way to edit the tablet version independently.

I would like to move the following higher on the page but only on tablet so that the elements look more central (like my desktop page):

• The scrolling block
• The three image blocks and three buttons

Images attached for reference

Desktop Screenshot

Tablet screenshot

Hope someone can help.

Thanks!

Hey @atmos Can you share the link to your site so I can inspect your code? Thanks!

On 10/4/2024 at 7:27 PM, Marya said:

Hey @atmos Can you share the link to your site so I can inspect your code? Thanks!

Hi, sure. My website is www.atmos.art

On 10/4/2024 at 7:42 PM, thesquareteam said:

Hello @atmos, To edit the tablet version independently in Squarespace, use custom CSS with media queries targeting tablet sizes (usually @media screen and (max-width: 1024px)). Adjust the positioning of the scrolling block and image/button sections to move them higher on the page. If you need more detailed assistance with the code, then ping me up!

Looking forward to hear from you.

Hi, by this do you mean creating a duplicate section for the tablet sizes and moving the blocks this way while hiding the section on mobile and desktop?

13 hours ago, Marya said:

@atmos

Does this work? The block codes below are your scrolling block, and the image block + buttons from left to right. You can adjust the px depending on how much you want to bring it up. 

@media screen and (min-width:641px) and (max-width:1024px) {
#block-659a5529fbb4a53d3758, 
#block-584784f53489ce33c8a4, 
#block-2e8836c387a4331aa65e, 
#block-672cf0a0e550ff8b2b17, 
#block-0ba298f692d4e9f7324c,
#block-f5d4a66c0cf6b95ce566, 
#block-5414e21d68f750877f26 {
  top: -20px;
}   
} //tablet only

 

Hi this semi worked but it only made the layout look correct when I changed the min value to 1024 and the max to 1640. This messes up my desktop website though. Is there a code that will apply these tweaks in landscape orientation only on tablets? That might fix the issue

When I use this code, the different layouts look correct on both my Macbook and iPad Air 5 but the navigation menu completely disappears (Logo, nav menu items, and basket icon).

@media screen and (min-width:1024px) and (max-width:1640px){
#block-584784f53489ce33c8a4, 
#block-2e8836c387a4331aa65e, 
#block-672cf0a0e550ff8b2b17, 
#block-0ba298f692d4e9f7324c,
#block-f5d4a66c0cf6b95ce566, 
#block-5414e21d68f750877f26 {
  top: -70px;
}   
} //tablet only

@media screen and (min-width:1024px) and (max-width:1640px) {
#block-659a5529fbb4a53d3758 {
  top: -55px;
}   
} //tablet only

@atmos I'm not sure but maybe @tuanphan can provide an alternative solution here? He's a legend! 

3 minutes ago, Marya said:

@atmos I'm not sure but maybe @tuanphan can provide an alternative solution here? He's a legend! 

Hi again, I think it was a glitch or something. I managed to get the nav menu to reappear though I am not sure what I did. It may have been changing the min and max values. If possible, could I get some help with a different query? You may know the solution. If so, I can share the post link with you.