atmos Posted October 4 Posted October 4 (edited) 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! Edited October 4 by atmos
Marya Posted October 4 Posted October 4 Hey @atmos Can you share the link to your site so I can inspect your code? Thanks!
atmos Posted October 6 Author Posted October 6 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
atmos Posted October 6 Author Posted October 6 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?
Solution Marya Posted October 6 Solution Posted October 6 @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 atmos 1
atmos Posted October 7 Author Posted October 7 (edited) 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 Edited October 7 by atmos Not a solution
Marya Posted October 7 Posted October 7 @atmos I'm not sure but maybe @tuanphan can provide an alternative solution here? He's a legend!
atmos Posted October 7 Author Posted October 7 (edited) 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. Edited October 7 by atmos
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment