How can I make my site mobile responsive?

[gpzeye01]

How to make the shopify site responsive? I tried to edit the css style file but despite putting the various sizes of the displays, it does not appear responsive from mobile. can someone help me? 

the text is center how to get responsive from mobile? 

[gpzeye01]

https://www.eliesaabmaison.com/

[gpzeye01]

@Litos 

[gpzeye01]

no i’m from staff.

[gpzeye01]

 

 

[gpzeye01]

the e commerce part is not active yet, we've been online for a few days, it's just a showcase for now.

[Litos]

Hi @gpzeye01,

Can you send me the link of the page you want to check, I will check it.

[gpzeye01]

https://www.eliesaabmaison.com/pages/2022-collection

[Litos]

Hi @gpzeye01,

Please send me the HTML you added to display this, I'll help you edit it

[Litos · Accepted solution]

Hi @gpzeye01,

Please change code:

<p style="text-align: center;"><span style="font-size: 31px;">THE COLLECTION </span></p>
<div><center><span style="font-size: 12px;">The ELIE SAAB Maison collection is entirely manufactured in Italy,produced and 
    <center> distributed by Corporate Brand Maison.A collection that perfectly blends together all
    <center>essential elements of the project; the uniqueness of the ELIE SAAB Brand signature,
        <center>the research in design, and the artisan excellence of Made in Italy.
            <center>The identity of the collection can be summed up as Spectacular Elegance,
                <center>harmously linking together its distinctiveness, its shapes contemporary spirit, 
                    <center>its tradition and attention to detail.

                </center></div>

=>

<p style="text-align: center;"><span style="font-size: 31px;">THE COLLECTION </span></p>
<div><center><span style="font-size: 12px;">The ELIE SAAB Maison collection is entirely manufactured in Italy,produced and 
    distributed by Corporate Brand Maison.A collection that perfectly blends together all
    essential elements of the project; the uniqueness of the ELIE SAAB Brand signature,
        the research in design, and the artisan excellence of Made in Italy.
            The identity of the collection can be summed up as Spectacular Elegance,
                harmously linking together its distinctiveness, its shapes contemporary spirit, 
                    its tradition and attention to detail.</span></center></div>

Hope it helps!

[bakr422]

To make your Shopify site responsive and ensure that the text is centered on mobile devices currentpackages provide you following these steps:

1. Use CSS media queries: Media queries allow you to apply different styles based on the screen size or device being used to view your website. This is crucial for achieving responsiveness. You can add media queries to your CSS code to target specific screen sizes or devices and adjust the layout accordingly.

Here's an example of a media query that targets mobile devices with a maximum width of 767 pixels:

@media (max-width: 767px) { /* CSS styles for mobile devices */ }

1. Adjust the text alignment: To center the text on mobile devices, you can use the text-align property. Add the following CSS code within the media query block:  @media (max-width: 767px) { /* CSS styles for mobile devices */ .your-element-class { text-align: center; } } 

   Replace .your-element-class with the appropriate class or selector for the element containing the text that you want to center.

   1. Test and iterate: Save your CSS changes and test your Shopify site on different mobile devices or using responsive design testing tools. Ensure that the text is now centered as desired. If needed, make further adjustments to the CSS code and test again until you achieve the desired responsiveness.

   It's worth mentioning that Shopify themes may have different structures and CSS classes, so the specific class or selector for your text element might vary. You may need to inspect the HTML structure of your site and identify the appropriate class or selector to target.

   If you encounter any specific issues or require further assistance, providing more details or sharing your code would be helpful in order to provide more specific guidance.