Shopify Question posted in
The Shopify help center can be found here.

CSS/Shopify styling

I am working on a Shopify template for someone and am still learning both liquid and HTML, javascript really.

I am struggling to align the logo on this page…

https://phoenixapparel.co.uk/password

At the moment I am using inline style tags to do this as it should be a simple edit, its very basic but I would appreciate any help.

This is the liquid template with the CSS;

<!doctype html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    {% layout 'password' %}
    <div>
    <img src="https://cdn.shopify.com/s/files/1/0490/5022/2756/files/VECTOR_PHOENIX.svg?v=1601726832" style="display: block;margin-left:auto;margin-right:auto;">
      <h1 style="margin-left: auto;margin-right:auto;font-weight:900;color:black;text-align:center;">Coming Soon...</h1>
    </div
    {% comment %}
    {% section 'password-content' %}
    The contents of the password.liquid templates can be found in /sections
    {% endcomment %}
    {% section 'password-footer' %}
  </body>
</html>

Seems dumb to post on here, but nothing I have tried/found seems to be working so anything would be helpful.

Tags:

2

Answers


  1. 0

    Put a class to the div <div class="logo-align>...</div>

    in css :

    .logo-align {
  width: the width you want;
  margin: auto;
}

    Don’t forget the width otherwise it’s not going to work

    Login or Signup to reply.
  2. 0

    If you just want to align the logo in middle add a class on that div and use display flex to align it to middle or any place you want
    and don’t put inline style. there should be a style.scss file in assets folder in shopify use that to add CSS

    .logo-align {
display: flex;
justify-content: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search