[Resolved] Need help with page hero

Home Forums Support Need help with page hero

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1484062
    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

    Desktop View
    Mobile View

    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

    #1484092
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1484349
    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

    #1484711
    David
    Staff
    Customer Support

    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.

    #1486075
    Alan

    Thanks David!

    #1486229
    David
    Staff
    Customer Support
    #1499102
    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?

    Text Background

     /*== 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

    Added Width

    @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

    #1499107
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1499139
    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

    #1499155
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1499165
    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

    #1499167
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1499172
    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.

    Mobile View

    Thanks,

    Alan

    #1499175
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1499182
    Alan

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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.