[Resolved] Need help with page hero

[Alan]

Hi. Im trying to setup a page hero so that the text looks visible on a desktop computer and also on a mobile. I seem to have it working but Im not sure if I have gone about it in the right way.

My web address is
Gold Coast Snake Catcher

My html is

<div class="header-section">
    <div class="header-section-1">			
<h3>Need an Affordable<br>Snake Catcher NOW?</h3>
<p>All Gold Coast Suburbs<br>24 Hours - 7 Days a Week</p>  
<h3>0423 866 017</h3>			
    </div>
</div>

I achieved this by setting it up like this.

Container – full width
Horizontal Alignment – Left
Inner Container – Contained
Padding Desktop: top 100px, right 40px, bottom 100px, left 40px
Padding Mobile: top 100% and all other boxes empty. This seemed to move the text down so it was more visible on a mobile

Was there a better way of doing this? I had a lot of trouble getting the text to remain visible when it was placed over the top of the image.

Thanks,

Alan

[Elvin]

Hi,

This is a very subjective issue which to be frank, is outside of GeneratePress’ scope of support.

But here’s to helping you out:

I believe learning a bit about elements of graphics design will help you immensely with this dilemma.

The issue here is clearly between using font color on a busy light background. You’re trying to nail the best contrast between these two.

The easy solution to this is adding an overlay color to the background so its brightness is reduced, adding more contrast between the image and the white font color.

To do that, you can go back to editing your Header Element and check “Background Overlay” on the option.

You then set the background color to black, but play around with the alpha values(opacity).

https://share.getcloudapp.com/Qwuk0nX7

Alternatively, if you’re pretty advanced, you can try this out:
https://css-tricks.com/nailing-the-perfect-contrast-between-light-text-and-a-background-image/

[Alan]

Hi Elvin.

Thanks for the suggestions. I will have a look at those. The main thing I was not sure about was my use of the mobile padding. I set the top padding at 100% to lower the position of the text on a mobile. Is that the correct way to lower the text if you just want to have it lower down on a mobile?

Thanks,

Alan

[David]

Hi there,

yes – thats correct – you can use Top and Bottom padding to align the content vertically. Each top and Bottom padding will center it, and as you have done adding more top padding will move the content down.

[Alan]

Thanks David!

[David]

You’re welcome

[Alan]

I’m still having a bit of trouble trying to improve the readability of the text on my page hero. I’ve almost got it how I want it but I cant work out how to make the transparent background only extend 10px all around the text. At the moment it extends right across the image. How do I make the transparent background form the shape of a rectangle and only sit behind the text?

 /*== Header Left ==*/

.header-section {
    text-align: center;
}

@media (min-width: 769px) {
    .header-section {
	background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius:10px;			
	}
}

@media (min-width: 769px) {
    .header-section {
        display: flex;
        text-align: left;
    }
    .header-section-1 {
        flex: 0 0 60%;
        margin-right: 80px;
    }
}

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column-reverse;			        
    }
}

.header-section h3 {

  color:#ffffff!important;         
  font-size: 34px ! important;
  font-weight: 600;	
  font-family: inherit;
  margin-bottom: 25px ! important;
	margin-top: 15px ! important;	
}

.header-section h2 {

  color:#ffffff!important;         
  font-size: 46px ! important;
  font-weight: 600;	
  font-family: inherit;
  margin-bottom: 25px ! important;
	margin-top: 15px ! important;
}

.header-section p {

  color:#ffffff!important;      
  font-size: 22px ! important;
  font-weight: 600;		
  font-family: inherit;
  line-height: 30px;
  margin-bottom: 40px ! important;
}

I have tried adding some width to it but then the text loses its format

@media (min-width: 769px) {
    .header-section {
	background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius:10px;	
	width:400px;
	}

Gold Coast Snake Catcher

Any help appreciated.

Thanks,

Alan

[Elvin]

For this CSS:

@media (min-width: 769px) {
    .header-section {
        display: flex;
        text-align: left;
    }
    .header-section-1 {
        flex: 0 0 60%;
        margin-right: 80px;
    }
}

Any particular reason why you needed display:flex and flex: 0 0 60%?

Perhaps this code will serve your purpose better.

@media (min-width: 769px) {
    .header-section {
        display: inline-block;
        text-align: left;
    }
    .header-section-1 {
        margin-right: 80px;
    }
}

Let us know if it works for you.

[Alan]

Hi Elvin

I’m not sure why I had that code there for but I have removed it now and it seems fine thanks. There is just one small problem. How do I define the color of the telephone number font on a mobile. I want the font to be white on the mobile header area but I don’t want to change it elsewhere on the mobile.

@media (max-width: 768px) {
a[href^="tel"] {
  color: #ffffff; 
  text-decoration: none; 
		}
}

Thanks,

Alan

[Elvin]

How do I define the color of the telephone number font on a mobile. I want the font to be white on the mobile header area but I don’t want to change it elsewhere on the mobile.

Can you specify which phone number? If its the one on the page hero, you already have a code for that on your custom CSS.

It’s this one:

.header-section h2 {
    color: #ffffff!important;
    font-size: 46px !important;
    font-weight: 600;
    font-family: inherit;
    margin-bottom: 25px !important;
}

Just change its color value.

By the way, I don’t see any clickable link on all your phone number texts on the site.

If you want the page hero’s phone number to be a clickable link, you’ll have to change its markup and add <a href="tel:#######"> ##### </a> anchor tag on it.

[Alan]

Hi Elvin

I think that that piece of code changes the h2 font color on a mobile and on a desktop. I’m trying to just change how it looks on the top of the photo in the header area on a mobile phone. Can that be done?

Thanks for pointing out the clickable link.

Thanks,

Alan

[Elvin]

oh sure my bad.

Try this:

@media (max-width:768px){
.header-section h2 {
    color: #ffffff!important;
    font-size: 46px !important;
    font-weight: 600;
    font-family: inherit;
    margin-bottom: 25px !important;
}
}

Note: If you actually changed the markup to of the tel number to turn into a clickable link, we may have to change this.

Thanks for pointing out the clickable link.

No problem, I thought you were trying to do that since your previous CSS code seems to imply you wanted the tel number to be clickable.

If that’s not the case, kindly pay it no mind. Thanks. 🙂

[Alan]

Hi Elvin

I gave that a try but when I view it on a mobile it is red. Is it something that happens on a phone so people know its a link? I want it to stay white.

Thanks,

Alan

[Elvin]

I’m not seeing the same thing on my end. https://share.getcloudapp.com/GGurlomn

Also, I’ve checked the markup and it is actually not a link. it’s just a plain <h2> text.

[Alan]

That’s weird. We have both got an Iphone XR and its red on both phones. No idea why

[Author]

Posts