Archived topic

I am finding it so difficult in designing my video background text or elements

3 replies · Started by Abali on July 1, 2022

Viewing posts 1–4 of 4

July 1, 2022 at 10:09 am #2270540

I need your help, i want my element on small screens to look nice. what I did is ugly. http://www.moe.by.gov.ng

Another Issue i have, there is a gap or overlap at my footer top with upper column.

July 1, 2022 at 4:24 pm #2270724

Hi Abali,

If you are not familiar with CSS, I would recommend using a block element with GenerateBlocks plugin to build the video background, in that case, you'll be able to style the content differently for mobile.

Here's the instruction:
https://docs.generatepress.com/article/background-video/

July 2, 2022 at 4:56 am #2271035

i used the block element to do that.....but my dilemma is getting it look nicer on smaller screen.

however you have not answered my second issue which is the footer overlaps the section over on small screen.

July 2, 2022 at 6:44 am #2271087

Hi there,

remove this CSS:

.background-video-content p {
    margin-top: -50px;
    font-size: 30px;
    font-weight: bold;
}

And add this CSS:

/* Desktop sizes */
.background-video-content p {
    font-size: 30px; 
    font-weight: bold;
}

.hero-text h1 {
    font-size: 70px !important;
    line-height: 1.2em;
    margin-bottom: 10px;
}

/* Medium screen */
@media(max-width: 768px) and (min-width: 501px){
    .background-video-content p {
        font-size: 24px; 
    }
    .hero-text h1 {
        font-size: 48px !important;
    }
}

/* Small screen */
@media(max-width: 500px) {
    .background-video-content p {
        font-size: 20px; 
    }
    .hero-text h1 {
        font-size: 36px !important;
    }
}

That will scale down the text on smaller screen sizes.

This archived topic is closed to new replies.

Start building better websites today.