Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
@devrocket flexbox, background images created with padding (to enforce a fixed aspect height ratio for a responsive width)
-
@williamli I work with flexbox too, IE11 is the worst.
I haven't had any issues with background images. Is the padding a different size in Firefox? -
Does it have a max-width on it? I've had that happen to me before where an overlay(loading screen) extended outside of the div.
The container had a max width but the overlay did not. It was only an issue in Firefox. -
@devrocket padding-bottom don’t work on FF and Edge. They both require height to be defined or else they won’t show anything (that was the case around September last year)
-
@devrocket thanks for the tips. will try to put a max width on it. right now it's a flexbox:
sidebar (1/4) | content (3/4)
it works when the content is full width wrapped on to its own row. -
@williamli ya I know what you mean about the height. I use flex auto often to protect the height from collapsing (our biggest IE issue).
don't you want vh for the height? Or is the height calculated from the view width -
@devrocket i have some cards (with responsive width). i want to crop the images inside the card 4:3.
-
@devrocket and the worst part was that I was trying to switch over from Chrome to Firefox for development to save some CPU cycles and batteries...
-
@williamli on the bright side you found the bug before it went to testing.
That's cool about the cards, I haven't seen that setup before.
I usually use flexbox for the content widths and then set a min height of the body to be 100vh - the size of the header and footer. -
@devrocket I have flexbox everywhere. replaced foundation / bootstrap responsive grid with my own flexbox responsive divs
-
@devrocket i am getting some luck with using min-width: 0;
lol I stopped asking myself why it make any sense a LOOOONG time ago -
@cabrasm was trying not to cross that line lol. I was curious but taking it more of rant instead of asking for someone to fix it. I'm sure he'll figure it out.
@rEaL-jAsE I like flexbox. I've been using it since AngularJS had it in material.
Related Rants
finished making website and all its features work across Chrome, Safari, and even IE11 and Edge..... but not Firefox... been like this for the last 3 sites that I have done. Mostly CSS3 related. Some CSS3 hacks are required for that browser... why are you the odd one out now Firefox??? That used to be the job of IEs!!!
rant
html5
browser
css3
responsive
internet
web