Jump to content

Spacing between blocks - having problems on mobile

Go to solution Solved by hansworks,

Recommended Posts

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 by hansworks
removed an issue I resolved
Link to comment

(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

image.png.65a83a1854e597e818cb599c93bf524f.png

(1C) I don't see women image

image.thumb.png.64f7198477e239fc3ac86a044deefa3f.png

(1D) You can use Gallery Section Grid, then you can adjust space easier without using code

image.thumb.png.fd1a9910a9b69ad5f9858373b70b0980.png

(1E) You mean reduce text size?

image.thumb.png.e03b23541131e40e82e7a5378dd4502e.png

(1F) this image?

image.png.92b1c2328974352556f2e20eaa234596.png

(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

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...

image.png

mobile fix icons.png

mobile fix hamburger.png

block spacing.png

Edited by hansworks
updated images
Link to comment
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?

block spacing.png

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

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;
}
}

image.png.7401aa5e23d9bfd407bb753acfe6101f.png

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
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;
}
}

image.png.7401aa5e23d9bfd407bb753acfe6101f.png

Thank you sooo much, that did it! I TRULY appreciate your help with this!

Edited by hansworks
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.