Jump to content

Recommended Posts

Site URL: https://www.currentmoodinteriors.com/collection

I have these widgets provided by a 3rd party site embedded on one of my pages as HTML code and can't figure out how to get them centered -- it's driving me nuts! I saw there was a previous post about this but since it was from 2 years ago, I thought I'd repost as a new question 🙂  I tried the methods I saw in the previous post but none seemed to work and I'm fresh out of ideas!

Link to comment
10 hours ago, currentmood_interiors said:

Site URL: https://www.currentmoodinteriors.com/collection

I have these widgets provided by a 3rd party site embedded on one of my pages as HTML code and can't figure out how to get them centered -- it's driving me nuts! I saw there was a previous post about this but since it was from 2 years ago, I thought I'd repost as a new question 🙂  I tried the methods I saw in the previous post but none seemed to work and I'm fresh out of ideas!

It looks fine to me. Can you take a screenshot on your end?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, currentmood_interiors said:

@tuanphan all the text is centered but you can see that the actual widget is off center to the left!

Screen Shot 2022-03-23 at 10.44.33 AM.png

Add to Design > Custom CSS

/* center widget */
.boutique-widget>div {
    margin: 0 auto !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
16 hours ago, currentmood_interiors said:

@tuanphan wow that worked -- thank you so much, you're amazing! Any idea why it still would be off center for mobile?

I don't know...try adding this to Design > Custom CSS

/* center widget on mobile */
@media screen and (max-width:767px) {
#b623dee3e8694a {
    max-width: unset !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 15px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
1 hour ago, waxyjax said:

Hi @tuanphan- I just found this thread and am also trying to center a widget. I attempted the first code snippet that you posted but it didn't work. I'm new to making edits to Squarespace CSS and am not sure if there is a particular section of the code I needed to place it in. Could you advise? 

https://www.oneactaid.org/give

 

Thank you!

Screen Shot 2022-06-24 at 1.56.55 PM.png

Add to Design > Custom CSS

div#block-a6de75532466e4a23303 div {
    text-align: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
43 minutes ago, waxyjax said:

thanks! The widget is close to center, which I think will work enough. Not sure if there's a way to get it perfectly centered - if you think there is though, I'll stay tuned!

Hi. That is not possible. 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.