Jump to content

irunyourdog

Member
  • Posts

    7
  • Joined

  • Last visited

irunyourdog's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. @tuanphan , I was missing the "-mobile-", and extra {}. That works. Thank you! If anyone sees this in the future, I had to add a min width to the desktop css, here is the full junk of code. //* Header Image Overhang Desktop *// @media screen and (min-width:768px) { .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } } //* Header Image Overhang Mobile *// @media screen and (max-width:767px) { .header-mobile-logo, .header-mobile-logo a { overflow: visible !important; margin-bottom: -14px !important; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 60px; transition: all 0.3s; } } //* Mobile Header Padding *// @media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 1vw !important; padding-bottom: 1vw !important; } } Adjust variables as needed
  2. @tuanphan Yes, I need to use that code and input different values for mobile and desktop, but my media query inputs didn't work.
  3. @tuanphan I did not solve. The logo overhang is intentional. I like that it shrinks and leaves a tab with my site name. I need to adjust the size parameter for mobile and desktop separately, regarding this bit of code .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } but a I can't get the media query to work.
  4. @Paul01 Thanks for responding. This seemed to make a bigger mess of things/have minimal affect regardless of how i play with the inputs. Again, I'm not a coder but, doesn't the broad based code for "Header Image Overhang" conflict with the media queried "Mobile Header Padding" code?
  5. inb4 this tuanphan fellow saves me like they save everyone. lol. @tuanphan I've used a dozen of your old posts on my site, you're the best!
  6. irunyour.dog Custom CSS: //* Header Image Overhang *// .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } //* Mobile Header Padding *// @media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 1vw !important; padding-bottom: 1vw !important; } } On desktop, the header is large and overhangs. On scroll it shrinks and leaves a nice little tab in the upper left corner. I like this. But on mobile it does the opposite. It starts small and then scales UP, (i think) to the established 100px in the code. I tried to double the entire command and media query two separate commands for mobile and desktop, so i can adjust their size and position separately using: @media screen and (max-width:767px) { .header-title-logo, .header-title-logo a { .......etc and @media screen and (min-width:768px) { .header-title-logo, .header-title-logo a { .......etc but don't code so i couldn't get them to work right. Thoughts?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.