Theme not entirely responsive on phone

  • Took a look at my site using chrome on my android phone. I have a sticky header that takes up almost the entire screen and all images on front page (feature page thumbnails) stack instead of shrink. On other pages I have used bootstrap to set up a matrix of images, but they display one at a time on scrolling. Is this the way a “responsive” theme should work? I expected something else I guess. On the same line, when using the sizing in the browser (cntrl +)to expand the view, the header doesn’t resize when the size is restored (ctrl 0) without refreshing the browser.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter golightblog

    (@golightblog)

    A friend just checked the site on their tablet size PC and the sticky header takes up so much of the screen that other things are hard to read. Is this something in the snippet for the sticky header that might need changed? Thanks!

    Your site seems to be working OK, even though not giving you what you need.

    The 3-bar menu kicks in at 979/980px (Twitter Bootstrap 2 feature).

    You need to read this Guide and understand @media where you adjust your CSS depending on the viewport. For example, change the width of the menu items, change fontsizes etc.

    As for the images, at Monitor size where you see 3 FPs in a horizontal line, these will shrink to a line of 3 vertical images on mobile viewports.

    Just to get you started, add this to CustomCSS or Child Theme style.css (at bottom):

    @media screen and (max-width:979px) {
/* Fixed width on 3-bar menu */
.navbar.resp ul.nav, .navbar.resp ul.dropdown-menu, .navbar.resp ul.dropdown-submenu,
.navbar.resp .nav-collapse.tc-hover-menu-wrapper {
max-width:          160px;                  /* Adjust to need */
}
}

    Thread Starter golightblog

    (@golightblog)

    Thanks much rdell. It does seem to be working as it should, just not how I thought it would – being a newb to this stuff… And thanks for the code for the navbar. I think I see how it works. I’m not a PHP or CSS programmer though I can decipher it some. It works great except on my Android phone that still puts any menu full width, regardless of the setting in the CSS code. Maybe a setting on the phone. The resizer plugin shows it working as expected. Anyone have any code to shrink the header height/image/font when the screen resolution goes down?

    Thread Starter golightblog

    (@golightblog)

    Sorry, must have been a caching problem. The navbar does resize on the android! What I’m wondering is if there is a way to force the entire header/menu block to resize on mobile? Other themes I use like on this site seem to resize the entire header, including menu block, images, etc. but customizr doesn’t. Is it possible to do so? Maybe even just resizing the logo and tagline text so it doesn’t need as big of a block? Thanks so much for all the help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Theme not entirely responsive on phone’ is closed to new replies.