Shopify themes, liquid, logos, and UX
Hi!
Is there someone who can edit the text that i want on my banner in a specific font and spot? Because whenever i try to put a text on my banner it automatically goes to the middle and i can't change the style or change where i want it to be seen.
< this is the example of how i want it to look on my banner
And this is what it looks like now (you can check my website): www.makeupholicscosmetics.com
I can pay a small fee as well for this!
Thank you
Solved! Go to the solution
This is an accepted solution.
So, go to your regular Admin Dashboard. Go to Online Store and then Themes.
In your Current Theme click on Actions and then Edit Code. You'll be taken to the code editor.
Once you are in the code editor, go to a folder called Assets. In assets there should be a file called base.css, select that file.
Inside that file write this:
.featured-content--text{
top: 5rem;
right: 30rem;
}
Then save. Go back to your page and tell me what happened.
This is an accepted solution.
You can play around with the values. If you increase the value of top it will go more to the bottom, if you increase the value of right it will go more to the left.
Your div with the class "featured-content--text" seems to already be in position: absolute, so, why don't you try to add to it a top: 5rem; right: 30rem.
This is an accepted solution.
So, go to your regular Admin Dashboard. Go to Online Store and then Themes.
In your Current Theme click on Actions and then Edit Code. You'll be taken to the code editor.
Once you are in the code editor, go to a folder called Assets. In assets there should be a file called base.css, select that file.
Inside that file write this:
.featured-content--text{
top: 5rem;
right: 30rem;
}
Then save. Go back to your page and tell me what happened.
i don't see that asset file though, i only see these:
Ok, then try going to the theme--async.css.liquid file and write the code there.
it worked! Thank you so much! Is there also a way i can go a little more to the right corner? Like where i pointed:
This is an accepted solution.
You can play around with the values. If you increase the value of top it will go more to the bottom, if you increase the value of right it will go more to the left.
Thank you so much! is there anything i could do for you?
Now that I think about it. I think it's better for you to use percentages instead of rems. They're going to look better in the mobile view. Write something like this:
.featured-content--text {
top: 7%;
right: 20%;
}
Hope this helped somehow.
hi! Oh i just saw how it looked on the phone haha. Thank you for telling me! I do see that on the phone the text is very big and right in the middle, is it possible to change that for the mobile only? Or you don't know that?
As for the font, you'll need to go to your theme--critical.css.liquid file and try to find a piece of code that looks like this:
@media only screen and (max-width: 767px)
.font--featured-heading, [data-item=featured-heading] {
font-size: 28px;
line-height: 1.2em;
}
You can see font-size is 28px, if you decrease it, the font of the header will get smaller in mobile view. Same thing goes for the line-height.
As for the positioning, you'll need to go back to theme--async.css.liquid and you'll need to find a piece of code that looks like this:
@media only screen and (max-width: 767px)
.featured-content--root[data-cover-image-mobile=false][data-mobile-overlay=true] .featured-content--text {
position: absolute;
}
Immediately, under position: absolute write top: -1rem; right:2rem;
@media only screen and (max-width: 767px)
.featured-content--root[data-cover-image-mobile=false][data-mobile-overlay=true] .featured-content--text {
position: absolute;
top: -1rem;
right: 2rem;
}
You can eyeball it. It's the same deal, if you reduce top it goes upwards, increase right it goes left.
User | RANK |
---|---|
62 | |
58 | |
47 | |
42 | |
41 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023