Beautiful Pro Before Header Issue

[SharonMarks]

Good Morning -
I am working on a website using the Beautiful Pro theme which is lovely and very easy to work with. I am having one issue.
I am trying to style the Before Header widget to be responsive. I would like it to wrap and keep the text in the white background (smaller but still at the top with a white background) but what is happening is that the text is going over top of tthe header. The site is http://costaricaresidencycard.com/...any help would be greatly appreciated.
Thanks!
Sharon

http://costaricaresidencycard.com

[Davinder Singh Kainth]

Text is appearing fine at the top - got that working?

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[SharonMarks]

Hi - No it's not working. The issue appears when the site is accessed on mobile devices. I should have said that. At narrower widths the text from the top overlaps onto the header image. This is what I am trying to stop.
Thanks!

[Davinder Singh Kainth]

Add display: block; to .before-header .wrap

Also use min-height instead of height

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[SharonMarks]

Thanks for your feedback. I added display:block to .before-header .wrap but that doesn't change what is happening. The text is still appearing on top of the banner on my phone. When I tried min-height it changed the height and made the hand image not flush with the banner which it needs to be.

Any other ideas?

Thanks again!

[Ginger]

H Sharon,

Ginger barging in here :- ) I see this code in your custom.css that is dictating the height:

.before-header .wrap {
   padding: 0;
  height: 100px;
  display: block;
}

For your mobile view you can add this to your custom.css :

@media only screen and (max-width: 768px) {
   
.before-header .wrap {
    height: 300px;
 }

}

This changes the view to this:

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[SharonMarks]

This worked perfectly! Thanks Ginger!

[Ginger]

"This worked perfectly!"

Three little words we always love to hear 🙂

Glad you are all fixed up!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Author]

Posts