What custom css do I need to center this content?

Store Design
1

Hey out there! Hoping to find someone who can help me solve something I haven’t been able to figure out on my own. I have an instagram UGC content grid placed in a NON live theme that I am working on, I wasn’t really pleased with the fact that this content was the entire width with no margin or padding whatsoever on the page. I was able to add a max width custom css code of 80% which makes this look much more pleasing, and it flows better with my the site. The problem I am now facing is that it is not centered, it is aligned to the left. I cannot figure out the custom css to center align it. Hoping someone may be able to lend me a hand here.

The following is what I placed to reduce the width:

.yotpo-pictures-widget {
max-width: 80% !important;
}

I have included a screenshot of the content showing how it is aligned on the left. My goal is to have it center aligned. Again, I am not working in a live theme so I have not linked my site since it would be of no help.

centerandwidth.png
centerandwidth.png1920×1080 449 KB

1 Like
2

Hello,

Have you tried adding margin: auto; to your yotpo-pictures-widget code also? If that doesn’t work, you could try margin: 0px auto; also

Like this

.yotpo-pictures-widget {
max-width: 80% !important;
margin: auto;
}
3

@Hermit_the_Log

Thanks for your response! unfortunately this didn’t do the trick for me. Not sure what the issue is with it.

4

Hmm darn. Is the width of the container that the yotpo widget is in set to anything? Usually the width of a parent container needs to be declared to certain width in order for and centering to work, such as margin: auto; or text-align: center;

5

Hi @SenSinsations you can remove the previous code of 80% and try this one.

.yotpo-pictures-widget {
margin-left: 10% !important;
margin-right: 10% !important;
}
1 Like
6

hi @SenSinsations .

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

you can try changing max-width to 100%

.yotpo-pictures-widget {

max-width: 100% !important;

}

or delete the old code and use this code

.yotpo-pictures-widget {

margin-left: 10% !important;

margin-right: 10% !important;

}

Hope this helps.

Best regards,

PageFly

1 Like
7

@Ahsan_ANC Thank you for replying! This worked! much appreciated! I tried something close to this earlier, but I did not remove the max width. Definitely will carry this knowledge forward with me as I continue learning. Just a few months ago I decided I wanted to begin learning how to customize my store on my own. Thanks again

8

@PageFly-Victor Thanks for taking the time to reply. Your thoughts of the margin 10% were on par with another person who commented and you both were on the money! thank you very much, this was exactly what I needed.