Support » Themes and Templates » Problems with mobile version of TwentyThirteen theme

  • cyberium

    (@cyberium)


    Hi – I’m trying to get this site to display correctly on mobile devices. I’m using custom css. At the moment the width of the site’s background header seems to be unresponsive and forcing the full width of the page while the content’s width is about a third of the window area width.
    Here is the relevant css:

    .site, .site-header, .site-main, .site-footer, .content-area, .site-content, .page {min-width:100%; max-width:100%}

    html,
    body{
    width:100%;
    overflow-x:hidden;
    }

    @media (max-width: 360px) {
    .site .site-header {
    max-width:100%;
    overflow-x:hidden;
    }
    #headimg {
    width: 100%;
    height: 100%;
    overflow-x:hidden;
    }
    .masthead img {
    width: 80%;
    height: 80%;
    overflow-x:hidden;
    }
    .site-content {
    max-width:100%;
    overflow-x:hidden;
    }
    }

    .site-header {
    background: url(https://egni.coop/wp-content/uploads/2019/06/cropped-cropped-egni-logo-header-2.jpg) no-repeat scroll top;
    background-size: auto auto;
    }

    @media (min-width: 360px) and (max-width: 767px) {
    .site .site-header {
    max-width:100%;
    overflow-x:hidden;
    }
    .site-content {
    max-width:100%;
    overflow-x:hidden;
    }
    }

    #masthead .site-header{ max-height: 200px;}
    .site-title {display: none}
    .site-description {font: 35px Calibri, Candara, Segoe, Helvetica, Optima, Arial, sans-serif; color: #990000; text-align: center; padding: 130px 0 0;}
    }

    .navbar {max-width:none}
    .nav-menu li:hover > a, .nav-menu li a:hover {background-color: #990000}
    .nav-menu .sub-menu, .nav-menu .children {background-color: #990000}
    .nav-menu .sub-menu .current-menu-item a, .nav-menu .sub-menu .current-page-item a {color:#f28a35}

    /* page width */
    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta, .site-main .sidebar-inner {max-width:1540px; min-width: 1000px}
    .entry-header {margin-bottom:0px}

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • cyberium

    (@cyberium)

    Wait, I think I solved it – should have set min-width to 100%.

Viewing 1 replies (of 1 total)
  • The topic ‘Problems with mobile version of TwentyThirteen theme’ is closed to new replies.