©2018 SAHAR BALA

  • Facebook Social Icon
  • Twitter Social Icon
  • Pinterest Social Icon
  • Instagram Social Icon

March 25, 2018

My team has recently been focused on a huge backend migration, and as a result we haven't been doing much frontend lately. Seeing as our sprint tasks were finished, I picked up what I thought would be a tiny little CSS fix from the backlog. I've been eager to get some CSS experience in. I also had just finished a couple great tutorials in this series, HTML & CSS Is Hard, where I learned a little bit more about advanced positioning and Flex. 

The task? Make the image in a side panel in our embedded checkout modal fixed at the top of the panel, so that with enough content, the image would stay fixed while the rest of the content scrolled behind it. Essentially, the image should be sticky and not scroll away when scrolling.

Below is the before behavior. As you can see, the entire panel scrolls, the image going with it. There's also a fun unexpected little right border on the image. 

When I started investigating a fix, I saw that the side panel used display: table, which I thought was curious...

Please reload

Recent Posts

December 17, 2018

March 23, 2018

Please reload

Archive

Please reload

Tags

Please reload

SAHAR LEARNS EVERYTHING

This site was designed with the
.com
website builder. Create your website today.
Start Now