hansworks Posted September 4, 2023 Share Posted September 4, 2023 (edited) Hello All- Thank you in advance. I am struggling with some issue on mobile version spacing and padding and a few other strange mobile issues on hfrelief.org. PW: phytoHF1 - i am a beginner trying to learn to use css on my squarespace sites so your help is greatly appreciated. Please find issue listed below: 1) Homepage: [A] I am trying to add space above and below the image - #block-yui_3_17_2_1_1692044997546_7952. [B] Below that I would like to center the Register button [C] In section - section[data-section-id="64e37a1f3a659d500f59c2d7"] - below picture of women, I want to add space at top and bottom of the section and would like the Register button to come after the icon images not randomly in the middle. [D] I would like to remove space between the logos in section section[data-section-id="64e3bbfbf72e51596b471dcc"]. [E] I want to reduce the size of type in footer #block-yui_3_17_2_1_1693496424598_13379 [F] in horizontal mode in mobile the image of woman with fan #block-yui_3_17_2_1_1692044997546_7952 is stretching across the span and I would like it to appear much more like the vertical version. Same thing is happening with logos in section[data-section-id="64e3bbfbf72e51596b471dcc"]. 2) The header button on the desktop button is somehow creating a new mobile screen when selecting the mobile menu. Please let me know if it would be helpful for me to show the custom code I have used to adjust the desktop elements of the site. These are a lot of asks, so I understand if you can only help with some of the issues. Many many thanks! Edited September 5, 2023 by hansworks removed an issue I resolved Link to comment
tuanphan Posted September 6, 2023 Share Posted September 6, 2023 (1A) I guess you can edit section then you can drag image up & drag button down to create space? Or what is problem here? (1B) It looks already centered to me (1C) I don't see women image (1D) You can use Gallery Section Grid, then you can adjust space easier without using code (1E) You mean reduce text size? (1F) this image? (2) I don't quite understand the question...you mean add burger mobile menu on desktop? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted September 13, 2023 Author Share Posted September 13, 2023 (edited) Hello! I am sorry that i have taken sooo long to respond. I have created a few screen grabs which include both desktop and mobile to clarify: First screen image: On mobile version the headline should not cover the photo but sit below it. The button on mobile version should center below the text. Second screen image: The button on mobile version needs to come after the last icon. Third screen image: How to make clicking on the hamburger takes user directly to the Form. Fourth screen image: How can space between image blocks in this section be reduced? Thanks in advance... Edited September 14, 2023 by hansworks updated images Link to comment
tuanphan Posted September 17, 2023 Share Posted September 17, 2023 You are using new editor, have you tried editing page > Click Mobile icon on top right > Then adjust the layout? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted September 18, 2023 Author Share Posted September 18, 2023 Hi Tuanphan. Thank you for the suggestion, i didnt realize you could adjust the mobile without effecting the destop. The only issues that remains is how to eliminate the mobile screen when you click on hompage hamburger, I would like to remove the middle page in the photo above. Thanks! Link to comment
tuanphan Posted September 21, 2023 Share Posted September 21, 2023 On 9/18/2023 at 11:48 PM, hansworks said: Hi Tuanphan. Thank you for the suggestion, i didnt realize you could adjust the mobile without effecting the destop. The only issues that remains is how to eliminate the mobile screen when you click on hompage hamburger, I would like to remove the middle page in the photo above. Thanks! You mean remove these spaces? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted September 21, 2023 Author Share Posted September 21, 2023 Hi! I was able to adjust those spaces, so there is only one remaining question: Is there any way in mobile to remove this middle page that is being generated by the button? I would like the user to go directly from hamburger to the form page. Link to comment
tuanphan Posted September 23, 2023 Share Posted September 23, 2023 You can use this CSS code to force button appear on mobile With making burger clickable to contact form page, it will require JavaScript + Business Plan/Higher @media screen and (max-width:991px) { .header-actions.header-actions--right { display: flex !important; } .header-actions-action.header-actions-action--cta { display: flex !important; position: relative; left: -90px; top: 5px; } .header-actions-action.header-actions-action--cta * { font-size: 7px !important; } header#header img { max-height: 40px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Solution hansworks Posted September 30, 2023 Author Solution Share Posted September 30, 2023 (edited) On 9/23/2023 at 5:01 AM, tuanphan said: You can use this CSS code to force button appear on mobile With making burger clickable to contact form page, it will require JavaScript + Business Plan/Higher @media screen and (max-width:991px) { .header-actions.header-actions--right { display: flex !important; } .header-actions-action.header-actions-action--cta { display: flex !important; position: relative; left: -90px; top: 5px; } .header-actions-action.header-actions-action--cta * { font-size: 7px !important; } header#header img { max-height: 40px; } } Thank you sooo much, that did it! I TRULY appreciate your help with this! Edited September 30, 2023 by hansworks tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment