sneather
-
Posts
12 -
Joined
-
Last visited
sneather's Achievements
-
Is "@media only screen" really "mobile only"...?
sneather replied to sneather's topic in Customize with code
Thanks for clarifying. That's really important to know. At the moment, I'm using "max-width" instructions, for those mobile page instructions, but maybe I need to also use "max-min"? The issue I am facing, is that some of my text margins are becoming huge, on larger desktop displays. But, when I increase the site-wide padge width (max) - it seems to trigger some weird behavior (from my CSS I think) and some of the text blocks shrink in size. Maybe someone can dig in and see if I screwed something up? www.adambaral.com P.S. You mentioned "...as opposed to print devices" - what does that mean? -
I assumed that the CSS code @media only screen would trump any and all screen-size settings (640px, 1280px, etc) - and ONLY affect mobile devices. However...I'm finding that my desktop behavior still seems to be affected by some of those CSS mobile changes. What am I not understanding? Have I grossly misunderstood the use of the @media code?
-
I've searched around, but can't quite find the right CSS. Is it possible to have menu navigation items in the mobile menu, which DO NOT show up in the desktop header menu overlay? (I'm not referring to folders.) Thanks!
-
How to change font on one page not entire site
sneather replied to saschulze's topic in Customize with code
Thanks, tuanphan. -
How to change font on one page not entire site
sneather replied to saschulze's topic in Customize with code
How about one page AND mobile, only? Thanks. -
Site URL: https://watermelon-tarantula-ap3e.squarespace.com/portfolio-1/project-one-a9d72-lnmfb-bfn5b-2prgr-kytrd-3zgpj Pass: Stormy I created a custom image block with an embedded Vimeo video, and link button. It looks how I want on desktop, but in the mobile version, it appears WAY too tall, because it's scaling down the video image to fit. Is there some CSS which would allow my to tailor the vertical height / cropping of that image block, ONLY for for mobile? Thanks!
-
Site URL: https://watermelon-tarantula-ap3e.squarespace.com/portfolio-1/project-one-a9d72-lnmfb-bfn5b-2prgr-kytrd-3zgpj Pass: Stormy Please see the attached image. The line spacing between my header font and my paragraph font is WAY too large. There seems to be no way to tighten it up, because if I try a soft-return (shift+return) it forces the fonts to all be the same selection, i.e. all header or all paragraph. I have dozens of these kinds of text treatments, in my site, so I'd like a way to solve this efficiently. Some CSS? Thanks!
-
Site URL: https://watermelon-tarantula-ap3e.squarespace.com/portfolio-1/project-one-a9d72-lnmfb-bfn5b-2prgr-kytrd-3zgpj Pass: Stormy I have carefully designed header titles for my six portfolio project pages. But in mobile (phone) they look pretty rough - the lines break where I don't want, and the different header sizes all become the same size. Is there a CSS I can employ, which would allow me to uniformly scale those header type designs for mobile? Thanks! P.S. In case it isn't clear, the top image is the as-designed desktop, while the lower image is the incorrect looking mobile.
-
Thanks, and I will shortly. I've got things in a somewhat jumbled state, right this second. Also, I think I may have worked around this issue, for the time being.
-
I've tried out the CSS which has been posted around here, to modify the number of portfolio grid columns for mobile. However, I'd like a little more granular control. I'm fine with the default single column for phones. But would like to force two-columns for tablets. And of course, I want to maintain whatever I choose for desktop (3-columns). So, is there a portion of the CSS which could be set for min / max screen width? That way I can only target a small range in sizes? Thanks!
-
Grid Overlay on Mobile: CSS results different iPad vs iPhone
sneather replied to sneather's topic in Customize with code
Quick update... I messed around with the "max-width" by changing it to 1024px. That enabled the forced text appearance on my iPad Pro - in vertical (portrait) orientation. The moment I rotated the device horizontal, the text disappeared - presumably because the pixels exceeded the max. Is there a better solution than just CSS for pixel width? Obviously, if I increase that max width too far, then I'll invariably trigger that always-on text for visitors' desktop / laptop monitors, which I DON'T want. -
I've applied the CSS below (I believe by tuanphan) to my site, to force the (desktop) hover text to always show on mobile. However, while it seems to do as indicated, on my iPhone. When I view the same test site on my iPad, it fails to show the hover text. I'm entirely new to any form of CSS, so I don't know this from that. What might I be doing wrong? Thanks! @media screen and (max-width: 640px) { .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text,.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { opacity: .35 !important } }
