- This topic is empty.
-
AuthorPosts
-
November 14, 2015 at 12:56 pm #234897brandinParticipant
I’ve been working on a simple site for a small ministry. After starting completely from scratch and then scrapping it four times, I finally settled on grabbing what I wanted to use from “The Band” bootstrap theme on w3schools. However, upon viewing it on a cell phone, it’s absolutely terrible. Not even legible. I’m guessing the padding needs to be removed once the viewing area gets to a certain resolution? I’d also like for the fixed-navbar to scroll with the rest of the page (no longer “fixed”) when viewed on mobile devices. There are some other things I’ll need help with, such as making the contact form functional, but I’m starting with this mobile problem first. If someone would be so kind as to help with these things, I’d be grateful. We haven’t purchased a domain or hosting yet, as I wanted to make sure everything else was going to work out beforehand. Anyway, here’s what I have so far: http://ntlatmc.altervista.org/
Thanks in advance.
November 14, 2015 at 1:39 pm #234898TheDocMemberWhat have you tried so far? Have you spent time reading about media queries yet?
November 14, 2015 at 1:54 pm #234901brandinParticipantI have not.
This is currently in my style.css:
.container {
padding: 80px 120px;
}..Which is fine for viewing on desktops/laptops. But on mobile, it needs to change. How do I do this?
November 15, 2015 at 1:08 am #234909TheDocMemberYou’ll want to read about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your simple case, you’ll probably want to target when your main navigation switches to the mobile version. So you’d write something like this:
@media (max-width: 767px) { .container { padding-left: 15px; padding-right: 15px; } }
In Sass it could look like this:
.container { padding: 80px 120px; @media (max-width: 767px) { padding-left: 15px; padding-right: 15px; } }
November 15, 2015 at 6:41 pm #234920brandinParticipantThanks for your reply. I’ve tried both of these, among several other things, and nothing is working, and I have no idea why. I’ve been stuck at this for several days. It’s getting very frustrating. Any ideas? Thanks.
November 15, 2015 at 9:43 pm #234921ShikkedielParticipantI don’t see the media query in the page source. But note that Bootstrap also set a bunch of CSS, although the order of stylesheets should make anything in
style.css
override that. You can check the style that has been set on elements by inspecting them with developer tools. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.