Implement this challenging layout in CSS - up to $75 bounty (incl. tip)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm looking for someone who can solve my CSS challenge, which is outlined on Github: https://github.com/hsch/css-challenge

It's fun, and you'll get paid for it. :-) However, I can only pay for a full solution, so please read the acceptance criteria carefully!

  • $40 tip for the accepted solution.
  • +$25 additional tip if you solve it using modern technology, i.e. without tables. :-)
  • $10 tip if I can't accept your solution, but add a significant clarification to the acceptance criteria.
How about bootstrap css only or material css? Could it be included?
Chlegou 1 month ago
from what you said, this is what i can imagine: https://ibb.co/Dz7vC9j it's not like the index page you have made. (in reqs, you are saying, only one block, but creating two blocks in the index file and there is no navigation bar also) but this is what i could imagine. the bounty is really challenging, making it working in responsive design for true. waiting for your confirmation regarding the image i have made.
Chlegou 1 month ago
If an existing CSS framework such as Bootstrap or Material helps, that would be fine. Please be careful to use only its CSS dependencies, as many frameworks come with Javascript parts, too, which can't be part of the solution.
Hendrik 1 month ago
I agree that this is challenging. :-) So, in the technical implementation, the image and navigation bar can be 2 blocks each, i.e. 2 divs or something similar. The important part is that, behaviour wise, the image plus the navigation bar need to "move" in the layout as one, tied-together "block". For example, as in how they are centered, together, between header and footer.
Hendrik 1 month ago
Your example, https://ibb.co/Dz7vC9j, looks fine, but be aware of one thing: In your example there is a lot of white space around the "content block" (image + navigation bar). This is only fine if that's already the maximum size of the image. If the image could be displayed larger (without being overstretched) it must consume as much space as possible.
Hendrik 1 month ago
There was actually a bug in the current demo, which I've fixed. Please have a look again, it looks much more than your example, https://ibb.co/Dz7vC9j, now: https://hsch.github.io/css-challenge/
Hendrik 1 month ago
Chlegou, if you inbox me your Paypal handle, I'll reward you the $10 tip when this bounty ends, for making me aware of the previously mentioned bug in my demo.
Hendrik 1 month ago
Nah I don't quit easily, im a challenger not a surrender ;p I will play for it, I see no one has solve it yet, it was 2.30am when you posted it, and I was extremely exhausted, so I slept. that's why I didn't hard code anything. Glad I got it right, even when demo was wrong, I will eat something now and start on it. Wait for my solution. ;) I don't have PayPal ( not available in my country, I have payoneer instead with min $50 payments) if I didn't solve it right, by the end tip me with the $10. And please wait for my solution ;)
Chlegou 1 month ago
It's fresh Monday in my time zone and I'm excited to see some promising solution. I'll review them ordered by the time of email notification within the next 12 hours, possibly earlier during lunch break. ;)
Hendrik 1 month ago
I think it's possible with modern CSS, but I am not sure if all browsers supports the features that I am going to use. Anyway your solution with Javascript doesn't work with Microsoft Edge. I try to implement a solution, but I'll need some time.
Stefano Balzarotti 1 month ago
Thanks for pointing out the problem in Edge, I wasn't aware. Feel free to give it a try, but please note that a valid solution has already been posted below!
Hendrik 1 month ago
@Hendrik I see the AjiTae is awesome, you can accept that, I was thinking a similar approach with flex layout. I had also another idea with CSS calc() and CSS variable, but I dunno if possible and I think it's not more worth to investigate.
Stefano Balzarotti 1 month ago
awarded to AjiTae

Crowdsource coding tasks.

6 Solutions


Here is the solution

https://moin5050.github.io/css-challenge/ (Update: Minor changes)

Let me know its working as per your requirement or if any condition are not fulfilled.

Note: Content block margin is set to auto. Do let me know if its important to be fixed.

Sorry, same problem as with the solution above from NVK. When you decrease the height, the image does not shrink to fit. It also overlaps with the footer and header.
Hendrik 1 month ago
@Hendrik can you share your testing methods. As i am not able to see these issue on chrome via default mobiles viewpoints.
Zhopon 1 month ago
Updated solution still doesn't fully work: When you make the window very narrow (i.e. little width), the image does not shrink. Thus, it is no longer fully visible. This is something that the demo does manage. I'll check tomorrow whether the acceptance criteria need to be updated.
Hendrik 1 month ago
I'm testing with Firefox on Desktop. I'm testing with the following browser window sizes:
  • Extremely large - the image is shown at full 600x800 pixels, centered horizontally and vertically
  • Long, but very little width - the image is resized to fit, maintaining the aspect ratio
  • Wide, but very little height - again, the image is resized to fit
Plus, I check the other layout constraints, of course.
Hendrik 1 month ago
For the sake of completeness, there are a couple of other, less obvious problems with the current solution:
  • Image and navigation bar don't form one consistent "content block" in the case of a narrow browser window (in the words of the acceptance criteria: the image part of the content block extends beyond the viewport (not allowed), and the navigation bar doesn't have the same width as the image (not allowed)).
  • There is a dynamic margin between content block and header (and footer) which depends on the window size. Thus, the margin is neither of fixed size (which the acceptance criteria do say) nor does the image consume the maximum available space.
  • Also, the image still extends over the header for very small browser windows.
  • ...there might be more, I haven't checked it all.
Hendrik 1 month ago
Damn it, and I really want you to succeed with it! :(
Hendrik 1 month ago
My test method included testing the code with the window sizes of major mobiles & tablets (Real world scenario). I am working on it and will let you know after i have some progress & thanks for the detailed feedback.
Zhopon 1 month ago
i have updated it. Please let me know if i am in right direction. as per my test its working good with smallest viewport of 450*450/
Zhopon 1 month ago
Although your implementation comes close, when I reload your link at moin5050.github.io I'm still seeing pretty much the same issues that I've already listed. :(
Hendrik 1 month ago

I have used tables to make the layout. Look at the solution at the link provided

https://jsbin.com/vitovefamu/1/edit?html,css,output

UPDATE : https://nvamsikrishna05.github.io/bountify-css/

Have a look at the updated solution and let me know.

Almost! :) The issue with this solution is that when you make the window very short (i.e. little height) but wide, the image does not shrink to accomodate. It also overlaps with the footer and header.
Hendrik 1 month ago
Unfortunately, still the same issue as before. Also, when you make the window very slim, the image becomes rather small and does not consume the maximum space available.
Hendrik 1 month ago

Hi there,

Finally Posting for this challenge. since i read it last night (was 2.30am local time when posted, so left the image and the comments and slept ), couldn't stop thinking about it.

As you said, this is for real a challenge, as it's breaking a big Dilemma which is image responsiveness in browsers.

As known, responsive image require fixing either height or width and the navigator will take care of the other one.

By theory, we couldn't scale image in both dimensions. More informations and workaround solution are available here.

Docs: https://www.w3schools.com/css/css_rwd_images.asp

But this challenge is about breaking this dilemma. So could we break it?

Unfortunately, Short answer is no!

But, as geeks, How far could we go trying to break this dilemma?**

i was playing with it for 5-6h till i finally solved this chanllenge! :D

Solution:

  • first, i made it scale with viewport size. as this is the first rule for responsive websites.
  • since the main problem is requiring one axis fixed (width or height), and by fixing both, we get original image size, and without fixing any it will bypass aspect ratio (breaking challenge rules). i made it 100% scaling in both dimensions.
  • fixing the max-width and max-height with original image size.
  • insert image in container, so we could manipulate it. now we could play with the container, to resize it with viewport size as we resize the web page. the container must also implement same max-width and max-height, to make it stop growing following viewport size.
  • adjust the shrinking rules for different web page sizes in landscape and portrait orientation. this is the most tricky thing in this challenge, so we override the default resizing rule in navigator, making it always in the middle of the screen.
  • to make it more fancy, for less than 200 screen height, we just completely hide the image, since by logic no space to display even! (as i said, just to make it fancy).

Regarding requirements:

They are all fit! except this one:

`Neither the image nor the content block ever extend over the header or footer or push them out of the viewport.`

This Rule is respected for header && footer but couldn't be respected between content block && footer since content is absolute, and footer is normal element. (by theory absolute is always overlaying elements...)

a work around solution could be deciding which one content block or footer will overlay the other one.

in the demos, i decided that footer is overlaying, and gave priority for header. so i gave different z-index for header and footer. so they both could overlay content block.

As Result: footer is the only element, who is overlaying the content block. no other overlays!!

DEMOS:

i have made two demos:

Demo1 (600x600): https://chlegou.github.io/css_challenge/index_600x600.html

Demo1 (1000x800): https://chlegou.github.io/css_challenge/index_1000x800.html

Limits:

  1. Of course there is a limit, which is the static max image size! (or at least, the max size we want the image to be displayed with!)
    it must be written in CSS code, or at least given as style.
    in demo, i have made w-max && h-max classes, holding the max sizes, only changing them to go! easy task! ;)
  2. could we make the static max image size dynamic?
    yes!!
    you could adjust max-width and max-height by js, depending of the image original size (regarding elements with these classes).
  3. my screen is 24 inch wide, we might need to adjust a bit the image shrinking rules for very large screen (like tv). i think not needed, but i'm just saying it, since not tested and could be a limitation.

Looking with no patient for your tests results! ;)

Thanks a lot for your very detailed explanation of things! Certainly helpful in understanding the problem better; so far, I just knew that I couldn't solve but it, but not why it's so difficult. I'll need a bit more time to review this in detail, but I already noticed one thing: When you make the window very narrow (small width), the image no longer maintains its aspect ratio. You might have explained that (haven't had the time to read it all yet), but unfortunately I don't think it can be an accepted solution that way.
Hendrik 1 month ago
Could you tell what browser? I have tested that, and seems working. Btw, images size heights is 600 or 1000px, plz tell me what browser? And could you give me a screenshot? That would be helpful
Chlegou 1 month ago
Sure! This is in Firefox. The image is 600x600, but it's not being displayed square: https://ibb.co/tPJwNKs
Hendrik 1 month ago
ah! "The image grows and shrinks in width and height as necessary to make things fit, and always maintains its aspect ratio." i made it shrink in height and width, and forget about aspect ratio, my bad! i will fix it asap.
Chlegou 1 month ago
thanks for the tip, it was really challenging btw!
Chlegou 1 month ago

Some "inline" magic.
Without safari support but mutch more stable:
http://ajitae.ru/css2.html

With safari support:
http://ajitae.ru/css.html

A lot of browser bugs. :(
I'm sure it can be perfected, but i'll think about it tomorrow. :)

This looks very promising, couldn't spot any problems at first glance. I'm looking forward to diving into your implementation later today and provide more feedback.
Hendrik 1 month ago
I found a funny browser bug in Chrome: Make the window very narrow (small width) until the image's height get reduced. Then extend the window again. What I'm seeing is that the image is stuck at its reduced size and doesn't grow back. I'll count that as a very peculiar browser bug and just thought I'd share. Overall, I'm quite impressed by this solution!
Hendrik 1 month ago
I couldn't find any issues in desktop browser. I'll do a bit more mobile testing tomorrow.
Hendrik 1 month ago
Tried on iPhone and it seems to work. Even embedded in a codepen and robust against orientation changes. Awesome! I didn't think it would be doable! It's very tricky solution and I'd love to understand how you came up with it, but either way, it's great! Thanks!
Hendrik 1 month ago
How? Tried one way - got edge bug. Tried second way - got firefox bug. Tried another - got chrome bug. Tried once more - got safari bug... Like this.) If you asking about overal idea - there was no wise method or much thought, just intuitive knowlage of css with three right away assumptions:
1. just flex(somth like chesedo method);
2. inline+absolute - current;
3. magic floats - discarded(but not diffinently wrong).
AjiTae 1 month ago
Not bad! Thanks! :)
Hendrik 1 month ago

i spent plenty time working on it, made a progress regarding the image, but couldn't adjust the navbar to it.

link: https://codepen.io/chlegou/pen/vvYzya

from github: https://chlegou.github.io/css_challenge/aspectRatio.html

if you want my advice, since we got the image working, let's move the navbar down before the footer.

The image seems to be behaving correctly, however, to be honest, I had that working already. ;-) The navbar is the hard part, and is in fact the only thing that my demo needs Javascript for. The navbar makes the challenge challenging. Sorry, I can't give up on that requirement.
Hendrik 1 month ago
You know that this is impossible right?
Chlegou 1 month ago
If you think it's impossible, what do you think about AjiTae's solution above?
Hendrik 1 month ago
I sow it, its flacky and not stable, at least that I could say.
Chlegou 1 month ago
Out of curiosity, anything specific you could point out?
Hendrik 1 month ago
what do you like to hear? :p
Chlegou 1 month ago

Here is what I have: https://codepen.io/chesedo/full/Bvagwr

It does need the header, footer and nav height to be hardcoded to work, but I can try to tweak around this if you need.

I kinda like that it's a very straightforward and easy to understand approach. Please be aware though that AjiTae came up with a probably very viable solution first! As for yours, there is no margin to the left and right of the content block. Also, as you mentioned, the footer and header need to be responsive to their content.
Hendrik 1 month ago
View Timeline