blank space / repeating div for text overlay?

  • Unknown's avatar
    arbsdesign · Member ·

    Hi

    I’m trying to lay text over a full width image on this page:
    http://www.arbsdesign.com/about

    To get the image full width, I’m using the featured image option on page settings, which is named entry-header

    the text appears as I want it, but there isa big blank space below the image which when you inspect the element, it looks like the div is repeating its self?

    my HTML are CSS I’m trying are as follows:

    

    About Arbs Design
    

    .about-hero-text {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	color: #ffffff;
}

    any ideas why this is?

    I tried the max-heigh css function but it didn’t effect anything

    thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    arbsdesign · Member ·

    should say entry-hero at the start not entry-header sorry

  • Unknown's avatar
    otpidusprime · Member ·

    Hello @arbsdesign,
    Yes it is happening, because you are repeating the entry-hero div using this: 

    <div class="entry-hero">
    <h1 class="about-hero-text">About Arbs Design</h1>
</div>

    To solve that, do this:
    1. Remove the entry-hero div and just use the h1 element:
    <h1 class="about-hero-text">About Arbs Design</h1>

    2. And then, use this CSS to centerize the text on the full-width image: 

    .about-hero-text {
    position: absolute;
    bottom: 1100px;
}

    this will alos cause the “WHAT I OFFER” section to stick to the full-width image, so to fix that just use some top-margin, like this: 

    .whatioffercontainer {
    margin-top: 70px;
}

    Hope this helps 🙂

  • Unknown's avatar
    otpidusprime · Member ·

    CORRECTION:
    this will also* cause the “WHAT I OFFER” section to stick to the full-width image,

  • Unknown's avatar
    arbsdesign · Member ·

    @otpidusprime

    Seems to work thank you!

    I have a couple more question;

    1. when it scales down it shifts down and eventually you can’t see the text.. I can’t get a media query to work to change the bottom px number at a certain screen size?

    2. Isit also possible to set a max height for the featured image container so that it doesn’t take up as much of the screen (vertically)?

    3. is this a good template to use if I want this effect on other pages using text over the featured image or was this the method you suggested because of other content on that particular page

    super helpful thanks in advance!!

  • Unknown's avatar
    arbsdesign · Member ·

    I thought this was working ok but the text seems to vanish, then when I go back onto my css it comes back? not sure if its just WordPress server today or if theres issues with the css/html on that page because I can’t get a media query to work Atal?

  • Unknown's avatar
    otpidusprime · Member ·

    1. when it scales down it shifts down and eventually you can’t see the text.. I can’t get a media query to work to change the bottom px number at a certain screen size?

    Yes you can. The breakpoints of your theme’s header are at: 896px, 768px, 600px. So you can use media queries like this: 

    /*The original code*/
.about-hero-text {
    position: absolute;
    bottom: 1100px;
}

/*below 896px*/
@media only screen and (max-width: 896px) {
    .about-hero-text {
        position: absolute;
        bottom: 1100px;
    }
}

/*below 768px*/
@media only screen and (max-width: 768px) {
    .about-hero-text {
        position: absolute;
        bottom: 300px;
    }
}

/*below 600px*/
@media only screen and (max-width: 600px) {
    .about-hero-text {
        position: absolute;
        bottom: 100px;
    }
}

    I noted that your theme uses VH units to set the height of the featured image section which changes the height according to the height of the browser viewport window, due to this it may happen that the text of the featured image get down and eventually become invisible from the view. So to solve that, use these modify the featured text CSS with vh units as well: 

    /*The original code*/
.about-hero-text {
    position: absolute;
    bottom: 50vh;
}

/*below 896px*/
@media only screen and (max-width: 896px) {
    .about-hero-text {
        position: absolute;
        bottom: 50vh;
    }
}

/*below 768px*/
@media only screen and (max-width: 768px) {
    .about-hero-text {
        position: absolute;
        bottom: 30vh;
    }
}

/*below 600px*/
@media only screen and (max-width: 600px) {
    .about-hero-text {
        position: absolute;
        bottom: 5vh;
        font-size: 33px;
    }
}

     

    2. Isit also possible to set a max height for the featured image container so that it doesn’t take up as much of the screen (vertically)?

    Yes, use like this: 

    /*If you add this, do not use vh units as mentioned before*/
.entry-hero {
    min-height: 500px; !important   /*overriding the default min-height*/
    max-height: 700px;   /*max-height should be greater than min-height*/
}

/*For vh units use this*/
.entry-hero {
    min-height: 60vh; !important   /*overriding the default min-height*/
    max-height: 70vh;   /*max-height should be greater than min-height*/
}

     

    3. is this a good template to use if I want this effect on other pages using text over the featured image or was this the method you suggested because of other content on that particular page

    It is good for all static pages like the about page.
     

    I thought this was working ok but the text seems to vanish, then when I go back onto my css it comes back? not sure if its just WordPress server today or if theres issues with the css/html on that page because I can’t get a media query to work Atal?

    Sometimes it maybe a browser glitch. Clear your browsers cache and cookies, login again and see if the problem persists.

  • Unknown's avatar
    otpidusprime · Member ·

    CORRECTION:

    2. Is it also possible to set a max height for the featured image container so that it doesn’t take up as much of the screen (vertically)?

    Yes, use like this: 

    /*If you add this, do not use vh units as mentioned before*/
.entry-hero {
    min-height: 500px !important;   /*overriding the default min-height*/
    max-height: 700px;   /*max-height should be greater than min-height*/
}

/*For vh units use this*/
.entry-hero {
    min-height: 60vh !important;    /*overriding the default min-height*/
    max-height: 70vh;   /*max-height should be greater than min-height*/
}
  • Unknown's avatar
    arbsdesign · Member ·

    That Is so helpful thanks for that!

    As you have listed two units, pixels and VH, which should I use? I’m familiar with pixels and have used them in many other CSS functions, but I don’t know what vh is? is there any difference?

    Thanks again!!

  • Unknown's avatar
    otpidusprime · Member ·

    As you have listed two units, pixels and VH, which should I use? I’m familiar with pixels and have used them in many other CSS functions, but I don’t know what vh is? is there any difference?

    Since you theme is using vh units for the featured image height i would suggest you to go for vh. If you are not comfortable using vh you can go for px but make sure you change the featured image height to px so that it remains static.

    I am quoting this: http://codepen.io/team/MedTouch/full/YqBJzv/

    The vw (view-width) and vh (view-height) units are relational to the viewport size, where 100vw or vh is 100% of the viewport’s width/height. For example, if a viewport is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the viewport width, or 32px.

    Hope this helps 🙂

  • Unknown's avatar
    otpidusprime · Member ·

    CORRECTION:
    Since your* theme

  • Unknown's avatar
    arbsdesign · Member ·

    Having some issues with the margin between the top image and the start of the content now.. looks fine in my CSS view but in a real browser the gap is way bigger, and in the real view the alignment of the word over the image is also a bit out? sorry for the hassle, not sure why this Is happening

  • Unknown's avatar
    arbsdesign · Member ·

    only seems to be above the biggest snap point that the gap appears.. perhaps a min width media query could sort it? not sure?

  • Unknown's avatar
    otpidusprime · Member ·

    Having some issues with the margin between the top image and the start of the content now.. looks fine in my CSS view but in a real browser the gap is way bigger, and in the real view the alignment of the word over the image is also a bit out? sorry for the hassle, not sure why this Is happening

    Don’t be sorry… We like challenges here on these forums 🙂

    You can reduce the margin by using a negative top margin like this: 

    .whatioffercontainer {
    margin-top: -150px;
}

     

    only seems to be above the biggest snap point that the gap appears.. perhaps a min width media query could sort it? not sure?

    Okay in that case, use this CSS: 

    @media only screen and (min-width: 896px) {
    .whatioffercontainer {
        margin-top: -150px;
    }
}

    Let us know if it works…

  • Unknown's avatar
    arbsdesign · Member ·

    That solved the gap so far so good. but I can’t get the text to stay central over the image, especially on an iPad.. intact the whole text on that page is shifted to the right on an iPad.. if only you could tell the text to stay in the centre of the image and it was that easy!!!

    thanks again for your help, super helpful!

    I thought.. if this is not going to work then I could put the text on the image but the featured image function has a tint over the image so the white text looks dull

  • Unknown's avatar
    otpidusprime · Member ·

    That solved the gap so far so good. but I can’t get the text to stay central over the image, especially on an iPad.. intact the whole text on that page is shifted to the right on an iPad.. if only you could tell the text to stay in the centre of the image and it was that easy!!!

    That is something you have to work on. Because keeping is exactly on the center is hell of a job with this theme, as you are forcing a page element to be on the featured header element.

    Just edit and adjust on the vh values to be on the center:
    These works on iPad(768 x 1024 px):
    1. portrait: 

    @media only screen and (max-width: 768px) {
    .about-hero-text {
        position: absolute;
        bottom: 30vh;
    }
}

    2. landscape(and also on screens above 896px): 

    .about-hero-text {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
    bottom: 40vh;
}

     

    I thought.. if this is not going to work then I could put the text on the image but the featured image function has a tint over the image so the white text looks dull

    Yeah, it will do that. But you can remove the tint if you like by using this CSS: 

    .entry-hero:before {
    background: none;
}

    OR 

    .entry-hero:before {
    background: rgba(0,0,0,0);
}

     

    thanks again for your help, super helpful!

    No worries @arbsdesign, glad i could help 😇

  • The topic ‘blank space / repeating div for text overlay?’ is closed to new replies.