Hi. I’m trying to align ABOUT US with SHOP (on the header). I tried adding custom css code like this one below but nothing worked. Please help me!
* {
padding-left: 0 !important;
}
hey @juliewadier02 share the URL of your website so i can help you
You want the code. A very specific code that applies to very specific things. That’s very specific…. So how do we figure out what it is? How do you know what is it and where did you get the screenshot? Oh yes, your theme name, page, and website url.
That is very secret stuff, I know. But alas, something needs to be leaked. We need someone to be the leaker. Are you up for this dangerous task? Do you so solemnly swear that you will commit to this mission impossible?
@Raydan-Zuhairan Gotcha. What code should I put in my css file? (I think it’s base.css)
Understood. Unfortunately, I just copy+pasted the code at the very bottom of base.css but nothing changed.
@juliewadier02 What’s happening is that the spacing you’re seeing isn’t coming from the page title itself, it’s coming from the layout wrappers the theme uses around the page content. So the rule you added never actually gets picked up.
At that point it becomes a case of finding the exact element the theme is using and adjusting it carefully so it doesn’t cause knock-on issues elsewhere. That’s usually easier handled by someone familiar with the theme structure rather than trial and error.
I see. Would you be able to take a look at the code if I send you the website link?
@juliewadier02 Yes, I can take a look. Go ahead and share the URL.
@juliewadier02 This is a layout-level CSS issue rather than a simple spacing setting, and changing it the wrong way can affect how other pages and mobile views render. It’s one of those fixes that needs to be handled carefully.
I also noticed the header and footer are still using the theme’s default layout, which suggests the overall design may not be finalized yet. That matters because spacing and alignment are tied to the theme structure, so it’s best to address this once the layout is properly set.
The design has been finalized, could you let me know what code to put in?
@juliewadier02 Understood. Because this affects the core layout and mobile rendering, I wouldn’t recommend pasting a generic snippet here, the exact selector needs to be adjusted carefully to avoid breaking other sections or future updates.
This is best handled directly in the theme with proper testing. If you’d like, I can take care of the fix safely, or walk you through it step-by-step knowing it may need a couple of iterations.
I see. Could you walk me through the steps? Really appreciate it.
@juliewadier02 Sure, it’ll be easier to walk through the steps properly over email so nothing gets missed. If you’re happy to continue there, please share the best email to reach you on.
(post deleted by author)
Can we keep the thread here actually? Emails get piled on and is easier to keep track here.
@juliewadier02 Go to Online Store → Themes → Edit code
Open base.css
Add this at the bottom:
.page-about .page-width {
padding-top: 0;
margin-top: 0;
}
If it still doesn’t move, it means the About page is using a different section wrapper in this theme. At that point it’s not a copy-paste issue, the selector needs to be adjusted carefully, otherwise it can affect other pages or mobile layouts.
Atelier Theme, About Us Page Title and Description. Easy. That wasn’t hard, was it?
This is meant to be centered.
Now, your screenshot only showed the “content” not the title, but your website clearly shows both.
Here is how to move both:
You can click on the section in the theme editor, scroll down to custom css and paste this code:
.page-width-content {
display: flex;
margin-left: 100px;
}
Here’s how to center the title and move just the description. Go to the Title settings, and click the center alignment, then click on the page section, scroll down to custom css and paste this code:
.page-width-content {
display: flex;
}
#shopify-block-AVVRKMGNWMlJTdlV3S__page-content {
margin-left: 100px;
}
Next time you can simply put your website and theme, accurately describe, so people can give you a solution.