Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Beginner seeks help on optimizing bootstrap theme for mobile devices.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #234897
    brandin
    Participant

    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.

    #234898
    TheDoc
    Member

    What have you tried so far? Have you spent time reading about media queries yet?

    #234901
    brandin
    Participant

    I 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?

    #234909
    TheDoc
    Member

    You’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;
      }
    }
    
    #234920
    brandin
    Participant

    Thanks 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.

    #234921
    Shikkediel
    Participant

    I 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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.