Change title so it's all on one line

[flammagreg]

Hi guys,

Website: seraneeva.com

How can I change the title on the create account page to be all on one line? 

[Made4uo-Ribe]

Hi @flammagreg 

Did you already solve this problem? 

Please. dont make one line on mobile. It will destroy your design. 

[flammagreg]

I left it as is. I have a question I've been stuck on for a while. Do you know how I can have the triangle logo at the bottom middle of the image banners just on the links in the footer. I need to take them off of the collection and product page. Current code is below

[Made4uo-Ribe]

Do you want them to show on your homepage banners? 

Check this one then. 

{% if template == 'index' %}
<style>
@media (min-width:768px) {
  .image-with-text-overlay__grid:before {
    content: "";
    display: block;
    background-image: var(--seperator-logo);
    background-position: center;
    position: relative;
    width: 64px;
    height: 64px;
    top: -32px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
  }
}
</style>
{% endif %}

And save. 

This will show on the homepage only. 

[Zivanov]

Hello @flammagreg ,
You can solve this problem with following CSS property: 

white-space: nowrap;

And also as @Made4uo-Ribe mentioned, your page will look broken on mobile devices if you set it to be in one line, so you can add media queries to apply this CSS property only on larger screens. Something like this:

@media (min-width: 769px) {
   .your-title-class  {
      white-space: nowrap;
   }
}

Hope it helps

[BSSCommerce-B2B]

Hi @flammagreg , 

I have reviewed your requirement, you can change the title on the create account page to be all on one line by css script. 

You need to set smaller font-size this text. You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet to the end of the file before tag </body>.

<style>
  @media only screen and (max-width: 749px) {
    .page--title.template-title {
      font-size: x-large !important;
    }
  }
</style>

In this step, you can choose font-size as you want : large/ small...

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!