How can I edit and position text on my website banner?

[msarwari]

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

[EmanuelVT · 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.

[EmanuelVT]

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.

[msarwari]

hi! thank you, but how do i do that? Sorry i am not familiar with website editing etc.

[EmanuelVT · 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.

[msarwari]

i don't see that asset file though, i only see these:

[EmanuelVT]

Ok, then try going to the theme--async.css.liquid file and write the code there. 

[msarwari]

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:

[EmanuelVT · 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. 

[msarwari]

Thank you so much! is there anything i could do for you?

[EmanuelVT]

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. 

[msarwari]

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?

[EmanuelVT]

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.