Changing banner content size- Swell

vernonboldick · Member · Mar 28, 2017 at 1:44 am
Copy link

Add topic to favorites
Hello,

I’m new to CSS…just wondering how to change the banner content to be much bigger (where it says High End. Affordable. Videos).

Thanks for your help in advance!

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Mar 28, 2017 at 9:54 am
Copy link
Hi there,
By changing the content size if you meant the font-size, then you can do that by just using the “font-size” property of CSS.
Edit the font-size property of the following code:
```
#banner-content p {
    font-size: 1em;
    line-height: 1.5em !important;
    padding: 0;
    margin-bottom: 40px;
    color: rgba(255,255,255,.7);
}
```
to this:
```
#banner-content p {
    font-size: 1.2em;
    line-height: 1.5em !important;
    padding: 0;
    margin-bottom: 40px;
    color: rgba(255,255,255,.7);
}
```
this will increase the size of the contents of the banner. If you want you can also bold the contents inside the banner using the “font-weight” CSS property, like this:
```
#banner-content p {
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1.5em !important;
    padding: 0;
    margin-bottom: 40px;
    color: rgba(255,255,255,.7);
}
```
More about CSS font-size property here: https://www.w3schools.com/cssref/pr_font_font-size.asp

More about CSS font-weight property here:
https://www.w3schools.com/cssref/pr_font_weight.asp

Let me know if this helps :)
vernonboldick · Member · Mar 29, 2017 at 1:30 am
Copy link
That’s perfect! Thank you so much!
vernonboldick · Member · Mar 29, 2017 at 1:55 am
Copy link
Oh sorry. One other question. How do I stretch the text in the banner to be on one line?

Thanks for all your help!
otpidusprime · Member · Mar 29, 2017 at 9:28 am
Copy link
Sorry but I did not understand what did you mean by stretching the text.

If you mean to keep the text on one line on all display sizes you can do that bay changing the “font-size” unit, remove the height and width CSS property and also remove the flex related CSS properties.

Your new code for the banner text should look like this:
```
#banner-content p {
    font-size: 4.6vw;
    font-weight: 800;
    line-height: 1.5em !important;
    padding: 0;
    margin-bottom: 40px;
    color: #ff0064;
    opacity: .4;
    border: none;
}
```
This will keep the banner text in one line by resizing the text relative to the display width.

No items found.