Trying to add my instegram handle next to the instegram icon

Solved

Trying to add my instegram handle next to the instegram icon

Newuser09826
Tourist
5 0 1

I managed to add it to my website by installing the following code into my base.css at the bottom now the issue is that this is being rendered on the PC but when I try to view it on my phone the text in the footer disappears

Here is the website: https://d5e373-08.myshopify.com/

 

  ul.footer__list-social.list-unstyled.list-social:before {
    content: "@jthooruae";
    position: left;
    height: auto;
    padding-top:6px;
    padding-left:10px;
    display: block;

   
}
  ul.footer__list-social.list-unstyled.list-social {
    position: relative;

}

And here is how the footer looks, try entering the site with your mobile and you will see the @jthoor is gone for whatever reason

Newuser09826_1-1711325121229.png

Thank you all for your support and let me know if you need any more info from me

 

 

 

 

Accepted Solution (1)

AnneLuo
Shopify Partner
1255 223 258

This is an accepted solution.

That's because the style code you added is located incorrectly.

You can follow the steps below to make modifications:

1. Remove the second line of code

2. Place the CSS code you added at the outermost part of the base.css file. Do not place it in parentheses at the end of the file.

 

AnneLuo_0-1711326242092.png

 

After modification, it can be displayed normally.

 

AnneLuo_1-1711326515852.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
1255 223 258

This is an accepted solution.

That's because the style code you added is located incorrectly.

You can follow the steps below to make modifications:

1. Remove the second line of code

2. Place the CSS code you added at the outermost part of the base.css file. Do not place it in parentheses at the end of the file.

 

AnneLuo_0-1711326242092.png

 

After modification, it can be displayed normally.

 

AnneLuo_1-1711326515852.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Newuser09826
Tourist
5 0 1

Amazing thank you so much , you are the best

Newuser09826
Tourist
5 0 1

Hey sorry quick question , do you know how to swap the positions of the text and the logo, so the logo is on the left and the text is on the right ?

AnneLuo
Shopify Partner
1255 223 258

Just change the "before" here to "after"

AnneLuo_0-1711415275998.png

Hopefully it will help you.

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

PageFly-Noah
Shopify Partner
1317 233 280

This is Noah from PageFly - Shopify Page Builder App

 

I have check and see if change screen mobile it will hidden code :before, You can add this code to base.css:

 

@media only screen and (max-width: 767px) {
    ul.footer__list-social.list-unstyled.list-social:before {
       content: "@jthooruae" !important;
       position: left !important;;
       height: auto !important;;
       padding-top:6px !important;;
       padding-left:10px !important;;
       display: block !important;
    }
    ul.footer__list-social.list-unstyled.list-social {
       position: relative !important;;
    }
}

 

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.