The issue is that the stuff on the front page is not aligned properly probably because i had to space things out weirdly to get them on the right place for desktop, and also the valen co and quality you can trust and the paragrpah below it are photos, the 2 are seperate photos but they are not text, then the valen co in the second photo on the bottom of all the pages is out of line, everything else is alright how it is but these are the main issues, if anyone is able to help out would be appreciated
Hi @Shopfit123 Welcome To Shopify Community Can You Please Share The URL Of Your Website
I tested and built on Horizon theme :
The parts that will not line up - the VALEN CO wordmark, QUALITY YOU CAN TRUST, and the paragraph under it - are images, not text.
An image keeps its own size and spacing,
The footer VALEN CO. is the same: an image sitting in a column that is set to the left.
Center the front-page section (keeps your images)
- Click the section itself, not the image inside it. The right panel should show the section name at the top.
- Open Layout and set Alignment to Center.
Set each image to Fit width
- Click each image block: the wordmark, the title, and the paragraph.
- Under Size, set Desktop width to Fit.
- Fill stretches the image edge to edge, which is what pushes them out of line. On Fit they sit at their real size and center together.
Fix the footer VALEN CO.
- Click the VALEN CO. logo, then select the column (the Group) it sits in.
- Open Layout and set Alignment to Center.
- It now lines up with NAVIGATION and CONTACT.
Recommendations: use text, not images
- Text always centers, edits, and reads better on a phone than a picture of text.
- Delete an image block, then Add block > Heading for the titles or Text for the paragraph, and type the words in. For the big VALEN CO wordmark you can use a Heading or the Logo block.
Note: reply with your website link and password if locked, i might be able to give u all the codes to swap texts with images and everything. Website helps finding your actual theme , font sizes, alignment ment and helps me setting up actual system in my Shopify dev store so that I can reproduce the problem and give better answer
My theme is ritual and this is my URL: https://notthatdeepapparel.myshopify.com
I don’t know if I can switch it to text because it has a certain look, also I can’t change the desktop version because right now that’s godo
Is there any other way to do it besides changing that, I don’t want the desktop changed and the theme is ritual and the url is https://notthatdeepapparel.myshopify.com
Thank you, I’ll wait till I get home will be be in around 7 hours, in the mean time do you know if you would be able to create a code with custom movement for every single item on mobile and then I can solo move each until they are all in line
You are on the Ritual theme.
This is all fixed in the Customize editor, not the code editor you opened.
You keep every image and your whole look. We only change alignment and delete some blank spaces. It is easier on a computer, but it works on a phone too.
1. Open the right editor
- Go to your Shopify admin, then Online Store, then Themes.
- On your Ritual theme tap Edit theme (some stores call it Customize). Do not use Edit code, which is under the three dots.
2. Front page: delete the blank spaces
- Tap the line of text that is out of line, for example PREMIUM SERVICES. DELIVERED.
- Its words open in a box on the side. Tap into that box.
- Tap just before the first letter, then hold Backspace to remove all the empty space in front of the words.
- Do this for every line that starts with a gap: PREMIUM SERVICES. DELIVERED., QUALITY YOU CAN TRUST., and the paragraph under it.
3. Front page: center the banner
- Tap once on an empty part of the banner (a spot with no text on it). The side panel should now show the section name at the top, not a block like Text or Image. If it still says Text, you tapped the words, so tap a little outside them.
- In that panel find the Layout area.
- Under Alignment, tap Center.
Everything now lines up in the middle and stays lined up on a phone.
4. Footer: aligning VALEN CO.
- Scroll down to the footer in the same editor.
- Tap the VALEN CO. text once.
- Set its alignment to Center so it matches NAVIGATION and CONTACT. You already centered those two, so give VALEN CO. the same setting. If tapping it selects the whole footer column instead, set that column Layout Alignment to Center.
5. Save
- Tap Save at the top right.
About your desktop
- Your desktop only looked placed because of those blank spaces. Once you center it properly, it stays clean on desktop and finally holds on the phone, and you keep all your images.
- If you really want the desktop pushed to one side, reply here and I will give you one small code that changes the phone only, so your desktop stays exactly as it is.
Tested on Ritual.
Hi i am back what should I do
yes can i do the code because I cant centre it enough on the actual desktop websitre
One thing I’d say about having this text as an image is that you used a background remover and it doesn’t look good. It ate away at some parts and left background pixels in other parts.
Also, it’s highly recommended that you use actual html text that search engines can understand. And it scales better across different screen sizes.
How much enough? Give some screenshots showing where it is not enough.
And possibly link to that page
This is the website : https://notthatdeepapparel.myshopify.com/ ,
and in this image imagine a straight line down the middle, like lined up with the request a quote button, and at the top the contact us is cutout and i also have “request a quote” beside it
@Ploqo this is the reply i didnt acc reply to you
also never mind their is a slider for the pages at the top so i just need this middle page centered down the middle
are you still there?
are you still there?
I opened your live store on Ritual and tried to find Center never holds.
1. Your text has invisible characters typed into it
- Your PREMIUM SERVICES. DELIVERED. line is not two clean words. Inside that one box you have about 30 spaces and 7 invisible marks that were typed in to push the words apart on desktop.
- You cannot see them, but they still take up width, so the line can never sit in the middle.
- Fix: tap that line, select everything in the box and delete it all, then type PREMIUM SERVICES. DELIVERED. fresh. Backspacing the spaces you can see is not enough, the invisible marks stay behind.
- Do the same clear-and-retype for any other line that will not center.
2. One of your pictures is saved off-center
- Your QUALITY YOU CAN TRUST. and the paragraph under it are not two things. They are one single image.
- That image has a wide empty strip on its left side and nothing on the right, so even when the block is centered the words look pushed to one side. No alignment button can fix a lopsided picture.
Two ways to fix that image:
- Re-crop or re-export it so the words sit in the middle with equal space on both sides, then re-upload. Center will then look centered.
- Or replace it with real text: delete the image block, Add block, Heading for the title and Text for the paragraph, and type the words. Text always centers, and it fixes the faded look and the mobile scaling at the same time.
Then center the section
- Tap an empty part of the banner so the side panel shows the section name at the top.
- Open Layout, set Alignment to Center. It now holds on desktop and on phone.
If u are still getting problems after multiple attempts, someone from community like @Moeed , @tim_tairli might help (there is dedicated page on Shopify listing Shopify partners for hire). They are Shopify parters for hire fixing themes problems like these . They might convert it into text rather than having text as images.
Or if you want to do it yourself, use Shopify sidekick, learn things like basics.