- This topic has 9 replies, 2 voices, and was last updated 9 years, 9 months ago by
.
-
Posts
-
Heya!
I’m now using media query to apply different CSS when the viewport narrows down to 768px. Now I need to know how to “crop” the width of the entire site to whatever width the viewport is. Is this possible?
If you enter http://pihastudio.fi with a <768px mobile device, you’ll see what I need, since the site is scrollable to the right, even though there is nothing there.
I’m trying
@media (max-width: 768px) { .body { max-width: 200px !important; } }(200px just so that the effect would surely show), but that doesn’t work.
Thanks,
Jaakko POk,
I succeeded by tracking down the elements on the page which were given erroneously large min-width values. Now the page only scrolls up-down, the site title is well presented and the tagline too. Took some tinkering.
Still, for future referece: is there a CSS way to crop a page’s width from a core level (html or body?)? In a way that NOTHING can surpass the set value?
– JP
Lead Developer
Your issue is being caused by this CSS:
.header-image { position: relative; min-width: 1440px; left: -95px; }Those values aren’t responsive, and will cause this issue.
What were you trying to do with that CSS? There’s most likely a better way that will be responsive.
There’s no way to force the site not to scroll right, but there are ways to make sure elements stay within their containers 🙂
Heya,
Man ^^ It’s not like everything that’s in pihastudio.fi CSS makes sense, I’m just learning and there’s bound to be lots of useless lines and overlapping code. Next site will be cleaner and the next even cleaner and so on.. 🙂 And when I learn, I can go back and clean up the old code, if I’m up to it.
However: That piece of code is for the alignment of the header image. The image contains transparent (png) borders left and right and I felt like I have to force the image to be as wide as my content container PLUS the transparent edges to line the visible edges of the header image with the content container. If I remove the min-width-property, the image makes itself into the size of the container (width of the whole content), thus being too small. The left: -95 is just so that the image would end up aligning correctly.
I’m still on the path to understanding how CSS layout works, basically, and it’s hard to grasp when picking places to inject code into – ie. looking at your code and figuring out what to do to get what I want.
Aligning things is especially painful, I always feel that there’s yet another parent element that constraints what I’m trying to accomplish.
Learning, learning… Phew
Thanks for all your help!
The problem I had is now eliminated, but that’s because I’ve rewritten the min-width value to be lower for the header-image further down the code in my dedicated mobile css section. I’m using only the mid-part of the header-image to show mobile visitors, so alignment and playing with the adjustments of the header-image’s transparent sides is not a problem.
– JP
-
This reply was modified 9 years, 9 months ago by
.
Disclaimer for the post above: I do NOT like bad code and I want to improve myself, I’m just saying: this site is the first place where I’ve really come in contact with CSS and so I’ve allowed myself experimentation and flaws. And loads of questions to developers.
– JP
Spent a little bit playing with this – tough one!
I see why you did it the way you did for sure.
I think your best bet here is to add this CSS:
body { overflow-x: hidden; }That will prevent the horizontal scroll.
Let me know 🙂
Hey Tom,
body { overflow-x: hidden; } .home { overflow-x: hidden; }Neither of these work, tried the .home for good measure although I don’t understand exactly why it could, would or should work. Just tried it.
Now the page displays correctly on mobile because no element on the page is set to a min-width (or remaining min-width rules have been nullified in the mobile specific CSS), so the blog fits snugly on a mobile browser.
Could it be considered mobile-responsive design if all of the visually presentable elements of the page would be wrapped inside a container after body? So that one could call upon all of the elements just-as-they-fit and leave crop the body with those measurements.
– JP
Not too sure what you mean there – I think as long as it’s usable without any horizontal scrolling it’s considered mobile responsive design.
As far as I can see the mobile version is great – I just see horizontal scrolling when it’s still desktop size but a smaller window.
Aaaaaaaah ok, I see! For THAT, your suggested overflow-x works like a charm! I wasn’t down to desktop, was just mumbling about mobile.
And what I meant with the mobile responsive thingy dingy was um, well, I was just writing out what my mind said so I guess it means nothing and everything and, also, something. Not The Thing, though, I don’t like that movie. Scary looking monster, me no like.
This matter is RESOLVED! *hammer*
Haha, awesome! Glad it’s all working now 🙂
-
This reply was modified 9 years, 9 months ago by
- You must be logged in to reply to this topic.
