Header Content TEXT Layout

Beaver Builder
1

Hello,

is it possible to increase the width of the text layout in the Header Content area? I’d like to fit the entire tagline on one line for desktop and tablets. Currently it breaks the line into 2, even on full screen monitors. The font size is good at H4, but still breaks:

“We provide the best technology solutions that fit your business needs”

Here is the code I’m using for the Header Content Text:
<h4><span style=“color: #1b75bc;”>We provide the best technology solutions that fit your business needs</span></h4>

Please let me know if that’s possible. I’m looking for a 3 column split ratio between the logo and the tagline, with the logo being 1/3, and the tagline being 2/3 of the width.

http://www.itechfit.com

thanks for your help,
Chris

2

Hey Chris,

You can use this CSS snippet. I’ll add this to the Theme CSS Snippets section as well. :slight_smile:

/*Change logo wrapper width*/
.fl-page-header-primary .row > div:first-child {
  width: 33.33%;
}
/*Change header content wrapper width*/
fl-page-header-primary .row > div:last-child {
  width: 66.67%;
}

Ben

3

Thanks Carlo,

I applied this code and it moves the entire tagline over the specified width, but still keeps breaking the tagline into 2 lines. How do I adjust the tagline so it doesn’t break into 2 lines, but remains at 1 (at least on desktops)?

thanks,
Chris

4

Hi Carlo…
basically I’d like to expand the width of the text inside the Header Content layout.

Chris

5

Hey Chris,

Sorry, it seems it was missing a dot. Check the code below.

/*Change logo wrapper width*/
.fl-page-header-primary .row > div:first-child {
  width: 33.33%;
}
/*Change header content wrapper width*/
.fl-page-header-primary .row > div:last-child {
  width: 66.67%;
}

Ben

6

Thanks Ben,

it works now. Is it also possible to center both the logo and tagline on mobile phones? They now both align to the left since I applied the above code. They look fine on tablets and the desktop.

thanks,
Chris

7

Hey Chris,

Sorry, forgot about that. This should be the final code that you’ll need. :slight_smile:

@media (min-width: 768px) {
  /*Change logo wrapper width*/
  .fl-page-header-primary .row > div:first-child {
    width: 33.33%;
  }
  /*Change header content wrapper width*/
  .fl-page-header-primary .row > div:last-child {
    width: 66.67%;
  }
}

Sorry for the hasty replies. :slight_smile:

Ben

8

Thanks Ben,

this works great now!

appreciate your help,
Chris

9

Hey Chris,

No worries! Also, you had another thread regarding responsive CSS. You can use the above code as reference for media queries. :slight_smile: Enjoy BB! :slight_smile:

Ben

10

One more request which is very similar to what we did for the Header… Can we also apply this code to the Footer? It is currently 3 columns, and looks fine on desktop and tablets, but when viewed on mobile phones, the columns all align to the left of the screen. Can I center each column to the screen, but keep the text left aligned only?

thanks for your help,
Chris

11

Hey Chris,

You’re gonna want to add classes to those 3 columns. Say for example, center-mobile. Then you can use the CSS snippet below. Feel free to adjust the max-width for the media query and the width of the element.

@media (max-width: 767px) {
.fl-col.center-mobile {
    width: 180px!important;
}

Ben