Need some CSS/Sass help

Need some CSS/Sass help
0

#1

I was browsing around and I ended up on the apartments.com page. I liked the UI so much that I decided to make a clone to test my front end skills, mainly CSS/Sass.

I understand the site layout and had no problem writing out the HTML, but I am having so much trouble arranging the images in such a way that it stays centered.
Another problem was with the page style breaking when I tried to zoom back to default (I keep my browser at 75% zoom). I’m trying to figure out how the original site snaps to 100% width when zooming back. I just put up a demo up on heroku, pardon the unfinished styling. http://apartments-clone.herokuapp.com/
Here are the Sass files: https://github.com/codefu-chivy/apartments-clone/tree/master/src/static/styles/sass/partials
Thanks in advance!


#2

It seems like they’re detecting the browser width, and doing calculations to determine what size those divs/images to display, so no matter the width (within a certain range), there will always be 2 photos, proportionally resized.

Probably using $(window).width() jquery function, then just doing % calculation to display the 2 images per row.

On smaller browser width, they just use one image to display at full div width.

In your heroku sample, you’re using just plain fixed width div, then floated: left. So as you decrease magnification (and therefore available width increases), your div images just stack and float to the left.


#3

@owel That’s it! What didn’t occur to me, however, was that one could capture zoom in and zoom out with an event. I thought the $(window).width() function only applied to things like resizing the browser window with the resize tool. I always seem to have trouble when it comes to floating items; it’s never centered. Thanks by the way.


#4

Yes, if you’re using $(window).width(), it will calculate properly the available width, even if you’re zoomed in or out (using the + / - keys on url address bar)

See this (my random quote generator)
http://randomquote-owel.surge.sh

then try zooming in or out… the centered div always remain centered, the div on the upper right corner always remain there also. Of course, you can also drag the browser window and resize it.


#5

Wow yeah I see that, nice UI by the way. After playing around with jQuery for a bit I figured out how to know if the page is being zoomed in or out, but how can one find out the actual zoom level? Take the site I’m trying to clone for example. Zooming past 75% makes the main container snap to 100% width, but I have no idea how to implement that. I suppose whatever function they use is checking to see if the available width falls below a certain level.


#6

Easy… just store the original width on page load, and if browser is resized, compare against original width… just do a bit of math to determine %zoom level.