Shopify themes, liquid, logos, and UX
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
Thank you all for your support and let me know if you need any more info from me
Solved! Go to the solution
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.
After modification, it can be displayed normally.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
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.
After modification, it can be displayed normally.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Amazing thank you so much , you are the best
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 ?
Just change the "before" here to "after"
Hopefully it will help you.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025