Help with my Responsive Page

Hey there,
UPDATE: I fixed the previous glitch but I ran into a new one. Because of the overflow & absolute positioning I used for my graphics I can’t seem to make my topbar sticky. Using absolute positioning breaks my layout and using sticky position just doesn’t work at all. :slight_smile: If anybody has any advice, I’d appreciate it!

I’m working on my product landing page and Ive run into a glitch.

How this should work is the 2 pizzas should peek off from the side a certain percentage depending on the size of the screen. (Bigger screens should show more, smaller should show less). It is also supposed to overlap the navigation background.

First I tried this with the pizza’s as background images. Which failed because then they can’t overlap.

Then I tried them as floats, which failed because their position needs to be absolute or they won’t overlap and floats don’t work with absolute positioning apparently.

I’m currently trying flex box which is working except…
So it works perfectly when I view it with the codepen bar. But when I put it in debug mode and try the responsiveness. It breaks. If I view it in debug on my phone it breaks. The right pizza is too far into the screen and shoves the entire site to the left.

Does anybody have thoughts on fixing this? Please? :slight_smile:

:tada::tada: What? I fixed it all by myself.
If anybody is curious it required an outer div with overflow set to ‘hidden’
:heart:

Back to the drawing board. It works on everything but mobile devices. Not sure why :frowning:

Got it for real this time! One of my web dev friends helped. I had to use my wrapper div, and add overflow: hidden, AND position: relative to it :slight_smile:
(Incase somebody has a similar problem)

UPDATE: I fixed the previous glitch but I ran into a new one. Because of the overflow & absolute positioning I used for my graphics I can’t seem to make my topbar sticky. Using absolute positioning breaks my layout and using sticky position just doesn’t work at all. :slight_smile: If anybody has any advice, I’d appreciate it!

Unfortunately you can’t have a sticky element with a parent that has an Overflow.
According to MDN (on position sticky):

This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior (see the Github issue on W3C CSSWG).

So

#wrapper{
 overflow: hidden; /* try toggling this */
}

is inhibiting your sticky behaviour. :frowning:

EDIT: some tips -

I don’t know your layout and design choice, but nothing stops you to have header both sticky and with overflow: hidden.
You can remove the overflow from wrapper and add it to header.
This of course will make the pizzas clip to the header; to me make sense, since you nested them inside header, therefore they should be treated as part of the header.

p.s. as Italian I cannot remain silent when you list as ingredient :laughing: :laughing:

pre-made pizza dough

1 Like

Thanks so much! I’ll see if I can make some adjustments. If nothing else there has to be a javascript workaround right? But maybe I can get the overflow hidden onto the header and a sticky onto the wrapper? :thinking: If there is anything I’ve learned in coding there is always a way. Maybe I can move the pizza’s outside of the header and fix their position…

Also LOL I actually make all my own pizza dough but the video I pulled from youtube which is from the food network asks for premade dough! I cringed a lot. I’m like “This is a cooking channel… telling us to use premade dough and canned tomato products!” :woman_facepalming::joy:

IT’s probably enough to give #outer an absolute position and a width, then remove the overflow from the wrapper so your navbar can be sticky and the pizzas won’t cause overflow.

#wrapper /* no overflow*/

#outer {
    overflow: hidden; /* so the pizza is "cropped" */
    position: absolute;
    top: 0;
    /* random values */
   width: 30%;
    right: -32px;
}

#rightPizza /* remove the declaration since is now outer to determine width and position*/

That should work with very little fuss. :smile:

1 Like

SUCCESS! Thank you so much!!!
I was actually able to tweak this before work so it’s live right now :smiley: I’m so excited!

1 Like

Glad I could help!
:pizza::heart:

Happy coding.

1 Like