Author Topic: Need CSS Help  (Read 697 times)

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14169
  • Karma: +72/-788
  • mini-ober is taking over
    • Windy Hill Web Solutions
Need CSS Help
« on: November 18, 2016, 05:07:08 PM »
I've apparently been out of the CSS game too long because I don't understand this. 

http://173.230.254.212/~aseeng/

I'm building this site for a client (I hate the design, but whatever).  He runs a resolution of 1024x768 (don't ask).  Whenever I reduce the site in responsive mode to that resolution the mobile feature kicks in and the menu on the left takes over the whole width.

I know it has something to do with min-width but I cannot figure out which element it is on.  It's using Foundation and I see the rules that define the screen sizes but I cannot seem to override them.  Any suggestions?

micah

  • A man on the Internet.
  • Jackass In Charge
  • Posts: 6479
  • Karma: +55/-55
  • Good man. Nixon's pro-war and pro-family.
    • micahj.com
Re: Need CSS Help
« Reply #1 on: November 18, 2016, 05:20:42 PM »
looks like theres a scss variable called "Large" set somewhere (maybe in _grid.scss) of 64.0625em (which apparently works out to 1024px) and that variable is used throughout the site when setting the media queries.
I'm sure if you find that and change the break point to something a little smaller, equating to like 1023px, it'll solve your problem

"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14169
  • Karma: +72/-788
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: Need CSS Help
« Reply #2 on: November 19, 2016, 09:00:15 PM »
Thanks Micah. I'll give that a whirl.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14169
  • Karma: +72/-788
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: Need CSS Help
« Reply #3 on: November 20, 2016, 11:01:49 AM »
I am going to have to read up on SASS to learn how to use it, but I basically had to do a search and replace to find all the references to the 64em reference point and change them to 63.  It's finally working now.  Thanks!

micah

  • A man on the Internet.
  • Jackass In Charge
  • Posts: 6479
  • Karma: +55/-55
  • Good man. Nixon's pro-war and pro-family.
    • micahj.com
Re: Need CSS Help
« Reply #4 on: November 20, 2016, 11:56:06 AM »
yeah, the actual CSS doc you tweaked is probably the compile output from various sass style sheets.  The sasss uses a variable, hopefully just set in one place and then called throughout.  Then at some point before going to the production site, a preprocessor like gulp runs through and generates one single CSS document that shows the fixed value from the variables.

variables, functions and nested selectors make CSS so much easier on big projects once you start using them. I was resistant at first but it is very nice once you get into it on a regular basis.

"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."