Jump to content

Image alignment. This shouldn't be so hard.

Recommended Posts

Site URL: https://octopus-porcupine-ldts.squarespace.com/

Hi. 

I'm going through hell with this 7.1 site. I just want to have an image, below some text, and have it align left, with the text.

Should be simple. But strangely it doesn't seem to be.

I'm not trying to align text over the image. Just the image to sit on the left, instead of centred.

I feel like this is so basic I'm missing something REALLY obvious inside the convoluted settings universe of 7.1.

Please put me out of my misery.

Screen Shot 2021-05-05 at 2.29.24 pm.png

Edited by kateatkins
Added image
Link to comment

As the site isn't live, please set a public password in the visibility settings and share it with us. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
8 hours ago, kateatkins said:

I'm not sure why the site needs to be seen for an answer to this question. It's a simple thing, no?

When we can see the site, we can look at the underlying code to understand how you've built the page - using columns, blocks and so on.

To left align all images like this, you could add this to Design > Custom CSS:

.sqs-block-image .design-layout-inline .intrinsic {
  margin-left: 0!important;
}

When Saved, it should change like this:

left-align-image.thumb.gif.80abd448378d6b3a16727893d62e98f4.gif

To limit the effect to this one image (instead of all images) you could use this instead:

.sqs-block-image#block-yui_3_17_2_1_1620092199082_4792 .design-layout-inline .intrinsic {
  margin-left: 0!important;
}

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 4 weeks later...

I guess I don't understand why it should require css. The entire point of squarespace is to avoid code. It can be slow, it can be fussy, but we don't have to code and it's always lovely right?? But yet here I am having to enter code for something that should be a simple preference... I'm disappointed.

Link to comment
  • 7 months later...
  • 5 weeks later...
  • 1 month later...
On 5/7/2021 at 8:25 AM, paul2009 said:

left-align-image.thumb.gif.80abd448378d6b3a16727893d62e98f4.gif

To limit the effect to this one image (instead of all images) you could use this instead:

.sqs-block-image#block-yui_3_17_2_1_1620092199082_4792 .design-layout-inline .intrinsic {
  margin-left: 0!important;
}

 

Paul, how do you know what the code is for each particular image please?

Link to comment
13 minutes ago, Karina100 said:

how do you know what the code is for each particular image

Take a look at my guide to using CSS and my guide to block IDs.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
35 minutes ago, Karina100 said:

Thanks for your help!

You’re welcome. And you’ve gained a new skill 👏

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...

2023 and this problem still persists. Quick fix is to create another text box above or below the stand alone image and click-drag the image into the new box. Seems the image needs to be nested so that you can assign it an alignment. Hope this helps.

Edited by ToddSpire
grammar
Link to comment
  • 6 months later...

I used to work in WordPress and moving images around, resizing, was easy. In SquareSpace, I cannot make an image align left no matter what I do. (And the button named "align left" does nada.) Can't resize. Why does SquareSpace make it so hard? I'm gonna beg the admins to change the program we use to something friendlier. This burns up hours of my time and is really frustrating.

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.