Flexbox in absolute container [PRO]

Support
#1

Hello,

so i have an issue regarding the containers of the pro header.

I want to create a background made with 2 images. i’m almost there but i’m lacking something due to a little bit of short experience with the container and bar structure on themeco’s PRO header.

i’ll leave my credentials below so you can access and check my code.

this is what i’ve done so far:

  1. i created a hero bar
  2. created 2 containers in it. one is called Image container and the other is called content container
    3)added all the text and CTA to content container
    4)added the images i wanted as a background in the image container
  3. added the navbar with absolute position at the top of the header

Now, everything in here worked fine but the image container is not working as i want it, i want the image container to be bigger that what it is, so the images stretch to the same size as the container and cover the entire screen.

i don’t know, though, how to responsively make the container bigger than what it is, without actually shrinking the images. could you please take a look at my code and see if i made a mistake or if there’s something in the container i misconfigured?

#2

Hi There,

I am not able to load header builder because of connection refuse error. Though on the frontend I can see that the image is fullwidth already:

To make container fullwidth, please check the dimension of your bar and make sure too that on container there’s no max-width setup.

#3

i’ll disable the security plugin that is not letting you access (i thought i had done so already, sorry about that), however, the problem is with the height, the width is alrght, i want the trees to go full height, from the beginning to the end of the container, but even if i make the container bigger, the images stay the same height.

#4

Hi There,

Please try reducing the width of your images and placing them again.

Let us know how it goes

#5

what would that accomplish? i want to have the trees’ height to cover the entire screen, how would reducing the width would help?

#6

Hi there,

That will change the aspect ratio, so when the width stretched (since it’s reduced) then the height will go beyond/extend.

Let’s imagine it another way, let’s say you stretched the height and became full-height then the width will extend outside and what will happen is, the tree you see in the image will be clipped (not displayed).

Another way is stretching both width and height, the problem is, the quality is affected. Have you watch 16:9 movie and forced in a square television? Yes, the movie casts have long faces and quality is not good :slight_smile:

I made a video recording.

I also recommend using a single background image for that, not two images in separate containers. Because they will respond independently, or, if you wish you could try Revslider, it’s made for that setup, multiple layers with responsive feature :slight_smile:

Thanks!

#7

Oh, that’s very interesting to know!. however, i ended up doing something different:
I used flex so i could always position the image at the top automatically, no matter the viewport, then used the “space-between” parameter on the hero bar to send each image to each horizontal side of the screen. then i absolute positioned them and controlled its height with JS (assigned the bar’s height to each image).
Not the most elegant solution, i know, but it’ll have to do for now. . Right now, though, it works like a charm.

#8

Thanks for sharing your solution!