How to change this code to fit on my website i tried inserting on personalized liquid

Store Design
, , , , ,

Topic summary

A user is attempting to add custom HTML/CSS code to their Shopify Dawn theme using a custom liquid section, but encountering centering and alignment issues.

Main Problems:

  • The section appears off-center and not aligned with other page sections
  • An image within the code displays incorrectly
  • When zooming in/out, the section stays positioned on the left side
  • The header width changes unexpectedly when applying suggested fixes

Troubleshooting Attempts:

  • A community member advised removing <head> tags and DOCTYPE declarations, providing cleaned-up code with CSS adjustments
  • Suggested adding width: 100% to the .textico class and using * .textico selector
  • User tested the code in both custom liquid and a new page section

Current Status:
The issue remains unresolved. The section still appears uncentered despite multiple code modifications. The user shared their preview URL privately for further assistance. The discussion involves troubleshooting CSS positioning (absolute positioning, margins, padding) and responsive behavior across different zoom levels.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

How to change this code to fit on my website i tried inserting on personalized liquid but it appears not centered,

How should I modify this code (I did myself) and make completely centered respect other sections?

I let an immage and a video to show the issue I’m having

Document

.bkg1{
background-color: black;
position: absolute;
width: 1100px;
height: 1100px;
padding: auto;
margin-left: 300px;
text-align: center;
}
.impos{
position: absolute;
padding: 100px;
top:240px;
text-align: center;

}
h1{
color: white;
position: absolute;
font-size: 40px;
text-align: center;

}
h2{

}

.textico{

color: white;
position: absolute;
font-size: 40px;
text-align: center;
}
/* body{
position: absolute;
padding: auto;
text-align: center;

}*/

Document

.bkg1{
background-color: black;
position: absolute;
width: 1100px;
height: 1100px;
padding: auto;
left: -100px;

text-align: center;
}
.impos{
position: absolute;
padding: 100px;
top:240px;
text-align: center;

}
h1{
color: white;
position: absolute;
font-size: 40px;
text-align: center;

}
h2{

}

.textico{

color: white;
position: absolute;
font-size: 40px;
text-align: center;
}
/* body{
position: absolute;
padding: auto;
text-align: center;

}*/

5 SEMPLICI MOSSE.

<br

Ecco qui la routine che faccio io
e che vi consiglio. NOIOSA,
MA NECESSARIA. Mattina e sera.

<img src="[https://cdn.shopify.com/s/files/1/0585/2682/6589/files/IRRADIA_Sito_foto-04_e74d62d1-621a-4103-be95-d87d774c64cb.png?v=1691853830](https://cdn.shopify.com/s/files/1/0585/2682/6589/files/IRRADIA_Sito_foto-04_e74d62d1-621a-4103-be95-d87d774c64cb.png?v=1691853830)" title="Imagen gris" alt=" imagen gris" width="900" t

Untitled.png
Untitled.png1273×777 99.2 KB

2

Hello @RayStaff

First thing first, you should not add the and other codes.

You should just add the style and the container code.

Just add the below code in the custom liquid:


   
        

            #  5 SEMPLICI MOSSE.
 Ecco qui la routine che faccio io

                e che vi consiglio. NOIOSA,

                 MA NECESSARIA. Mattina e sera.

Even if this is not solved, please do share the store url.

Thanks

3

I copied ad paste what u sent but it doesn’t work properly,

I’m working on dawn theme, the theme is not pulled online,

This is the preview of the theme

https://2edq0j8mr888yioa-58526826589.shopifypreview.com/collections/all

The section I’m trying modiffy is in the bottom, As u can see using the new code u gave me , immage is not showing proprfly , and section is not centered.

How can solve this, ? Thank you

4

Another thing, when I zoom out and zoom in, Section stay always on the left side

why is this happening?

Thank you so much

5

RayStaff_0-1691920578371.png
RayStaff_0-1691920578371.png1579×719 46.6 KB

6

Can you send me the url so that I can refer it…

Thanks

7

I sent to you a pivate message

8

Add the bleh code inside your 

.textico {
    width: 100%;
}

.textico * {
    width: 100%;
}

Hope this works.

Thanks

9

unfortunately it doesn’t work, after I added the code the banner with reduce and compacted some pages on the header

RayStaff_0-1691952571282.png
RayStaff_0-1691952571282.png1031×195 17.1 KB

10

I tryed to create the same section with a new page instead personalized liquid, and it seems quite better (the header width doesn’t change) but the section still not centered