Archived topic

Header Element Font Size for Mobile

5 replies · Started by David on October 23, 2021

Viewing posts 1–6 of 6

October 23, 2021 at 9:35 pm #1973256

Hi there,

I am hoping you can help please. I am using a header element for the following page:-
https://darkstories.com.au/sydneyrazorgangstour/

And I am trying to reduce the font size of the text that overlays the header video, but just for the mobile layout.

I am sure I am very close to the solution with the below CSS; would you mind reviewing to see where I might be going wrong please?

/* Mobile Hero Typography */
@media (max-width: 768px) {
.background-video-content p {
font-size: 50%;
}
}

Kind Regards
David

October 24, 2021 at 4:16 am #1973370

Hi there,

i would suggest removing the inline styles from your text HTML. So the two text lines look like this:

<p class="video-container-title">Take a walk on the dark side</p>
<p class="video-container-subtitle">Hear the untold stories from Sydney's Razor Gang Wars</p>

Then we can style them with this CSS:

.video-container-title {
    color: #fff;
    font-family: verdana;
    font-size: 44px;
    text-align: center;
    opacity: 1;
    line-height: 1.6;
    margin-bottom: 0;
}
.video-container-subtitle {
    color: #fff;
    font-family: verdana;
    font-size: 24px;
    text-align: center;
    opacity: 1;
}

@media(max-width: 768px) {
    .video-container-title {
        font-size: 22px;
    }
    .video-container-subtitle {
        font-size: 16px;
    }
}

October 24, 2021 at 2:47 pm #1973916

Hi David,

Thanks again for your help on this. The code changes are working beautifully, with just one minor issue. On the mobile layout vertical view, only the .video-container-title is visible. It looks like I will need to align the text towards the top or middle of the content region.

I have tried lots of different CSS combinations without success - apologies for my lack of expertise in this area. May I ask for your assistance one more time, please?

Kind Regards
David

October 24, 2021 at 3:56 pm #1973941

No problems - happy to be of help.
I would change this CSS:

.background-video-content {
    position: relative;
    margin-top: 35vh;
    z-index: 1;
    text-align: center;
    line-height: 35px;
}

to:

.background-video-content {
    position: relative;
    margin-top: auto;
    margin-bottom: 30px;
    z-index: 1;
    text-align: center;
    line-height: 35px; 
}

The margin-top: auto; will push the content to the bottom of the container, and the we add the margin-bottom: 30px to keep it 30px from the bottom of the container.

And then in this CSS i would a minimum height property so the container never gets too small for its content:

.page-hero.video-container .inside-page-hero {
    display: flex;
    flex-direction: column;
    height: 1000px;
    width: 100%;
    justify-content: center;
    align-items: center;
    max-height: 47vw;
    min-height: 300px; /* add this property */
}

October 24, 2021 at 4:54 pm #1973969

Thanks, David, that has helped resolve the issues. I had some troubles with the horizontal layouts on mobile, etc, but managed to scrape together enough CSS settings and tweak a few values to resolve the rest. Thank you again, I don't know how I could resolve these issues without your inputs.

Have a great day.

Best Regards
David

October 25, 2021 at 3:54 am #1974291

Great to hear that - and glad to be of assistance :)

This archived topic is closed to new replies.

Start building better websites today.