Minimum responsive looks not okey

Community Forums Forums Design Tips and Tricks Minimum responsive looks not okey

This topic is: resolved

This topic contains 10 replies, has 3 voices, and was last updated by  Annaedv 1 year, 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #37831

    Annaedv
    Participant
    Post count: 39

    Hello (again)

    I use Minimum with static page. I have changed my header hight to 400px (100 is standard). The site looks okey on the webb but not in my mobile.

    There is a big white space between my header and the menus. What to do?

    http://www.advokateden.se
    #37968

    ModernMuse
    Participant
    Post count: 54

    You’ll need to adjust the min-height again for a mobile-sized screen. This can be done within the media query section of the style sheet (towards te bottom).

    When I used Firebug, a height of 107px looked good at the 320px break point. You’ll need to bump up the size for 480px and so on.

    Someone correct me if there’s a better way…


    #38366

    Annaedv
    Participant
    Post count: 39

    Hello. Thank´s for trying to help. But I don´t understand.

    I find the css, but there is only max-width and width.

    Using the min-hight in #header give me also a white space between the menu and the content. Then I have two big white spaces…

    Can you be more specific about the code and where to place it?

    Anna

    #38413

    ModernMuse
    Participant
    Post count: 54

    CSS media queries are written into your style sheet to help make your design responsive. Media queries are written based on common screen sizes for various devices (desktops and vertical/landscape views for smart phones & tablets).

    The large white gap is being caused by the fixed header height of 400px.

    Because your site is responsive, your header image is being scaled down to accommodate tablet and smart phone screens. To fix this, you need to enter optimal image heights for common screen sizes in the media query section (labeled “Responsive Design”) of your style sheet.

    I’ve done this for you.

    Starting with line 1529 in your style sheet, copy and paste the following…

     

    /* Responsive Design
    ———————————————————— */

    @media only screen and (max-width: 1200px) {

    .wrap,
    #header {
    width: 960px;
    }

    #content {
    width: 560px;
    }

    .post-type-archive-portfolio .portfolio {
    width: 280px;
    }

    }

    @media only screen and (max-width: 1023px) {

    body {
    font-size: 16px;
    margin: 0 auto;
    width: 100%;
    }

    p {
    font-size: 16px;
    }

    .archive-page,
    .content-sidebar #content,
    .content-sidebar-sidebar #content,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .full-width-content #content,
    .menu-primary,
    .menu-secondary,
    .minimum-landing .wrap,
    .sidebar,
    .sidebar-content #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content,
    .wrap,
    #content-sidebar-wrap,
    #footer .creds,
    #footer .gototop,
    #footer-widgets .wrap,
    #header,
    #header ul.menu,
    #header .widget-area,
    #sidebar-alt,
    #title-area {
    width: 100%;
    }

    .menu-primary,
    .menu-secondary,
    #description,
    #footer .creds,
    #footer .gototop,
    #header ul.menu,
    #header .search-form,
    #title,
    #title-area {
    float: none;
    text-align: center;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    #header .search-form,
    #wrap {
    margin: 0;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    #content,
    #description,
    #footer-widgets .wrap,
    #header .widget-area,
    #title,
    #title a,
    #title a:hover,
    #header .search-form,
    #title-area {
    padding: 0;
    }

    #header {
    background-size: contain !important;
    }

    #title {
    margin: 10px 0 0;
    }

    .menu-primary li,
    .menu-secondary li,
    #header ul.menu li {
    display: inline-block;
    float: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    border: none;
    padding: 10px;
    }

    a.page-title-button,
    .menu li.right {
    display: none;
    }

    .menu li li {
    text-align: left;
    }

    #page-title {
    padding: 10px 0;
    }

    #page-title p {
    font-size: 24px;
    text-align: center;
    }

    .minimum #inner,
    #inner {
    padding: 20px;
    }

    .minimum #inner .wrap {
    padding: 30px 0;
    }

    .post-type-archive-portfolio .portfolio {
    margin: 10px 15px;
    width: 45%;
    }

    .single-portfolio img {
    border: none
    }

    #footer-widgets .widget {
    padding: 20px 20px 0;
    }

    #footer .custom-footer li {
    margin: 0 10px;
    }

    #footer .wrap {
    box-sizing: border-box;
    padding: 25px 10px 0;
    }

    }

    @media only screen and (max-width: 768px) {

    .header-image #title-area {
    height: 270px;
    }

    }

    @media only screen and (max-width: 600px) {

    #home-featured {
    padding: 30px 0 0;
    }

    .home-featured-1,
    .home-featured-2,
    .home-featured-3,
    .home-featured-4 {
    padding: 0 0 30px;
    width: 50%;
    }

    .genesis-grid-even,
    .genesis-grid-odd {
    width: 100%
    }

    .post-type-archive-portfolio .portfolio {
    margin: 0 0 20px;
    text-align: center;
    width: 100%;
    }

    .portfolio-featured-image a img,
    .portfolio-featured-image a img:hover {
    border: none;
    }

    .five-sixths,
    .four-fifths,
    .four-sixths,
    .one-fifth,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fifths,
    .three-fourths,
    .three-sixths,
    .two-fifths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    padding: 0;
    width: 100%;
    }

    .navigation li a,
    .navigation li.disabled,
    .navigation li a:hover,
    .navigation li.active a {
    padding: 5px 10px;
    }

    }

    @media only screen and (max-width: 480px) {

    .header-image #title-area {
    height: 163px;
    }

    }

    @media only screen and (max-width: 320px) {

    .header-image #title-area {
    height: 107px;
    }

    }

    @media only screen and (max-width: 300px) {

    .home-featured-1,
    .home-featured-2,
    .home-featured-3,
    .home-featured-4 {
    padding: 0 0 30px;
    width: 100%;
    }

    }

     


    #38416

    ModernMuse
    Participant
    Post count: 54

    What I meant to say is…

    Completely replace the final “Responsive Design” section by pasting over it with the code I’ve included above.

    Don’t forget to make a backup copy of your style sheet before making any major modifications. ;)


    #38424

    ModernMuse
    Participant
    Post count: 54

    Anna, you may have trouble copying & pasting the CSS code from my reply since I can’t figure out how to properly format CSS around here (sorry — forum newbie). The @media should not be links, otherwise the code will copy & paste correctly.

    Can someone help me understand how to format css code around here? I know to add [css] [/css]

    around code, but without an option to preview my replies, it gets confusing.

     


    #38425

    ModernMuse
    Participant
    Post count: 54

    Just saw the lovely blank code box. Ok, Anna, try grabbing the code from here…

     

    • This reply was modified 1 year, 3 months ago by  ModernMuse.
    • This reply was modified 1 year, 3 months ago by  Susan. Reason: edited to remove code which was not formatting correctly)
    • This reply was modified 1 year, 3 months ago by  ModernMuse.
    • This reply was modified 1 year, 3 months ago by  Susan. Reason: edited to remove code which was not formatting correctly)
    #38428

    Susan
    Moderator
    Post count: 7991

    @ModernMuse – refer to FAQ #5 for how to add code: http://www.studiopress.com/forums/faq/

     

    For larger blocks of code, it’s recommended that rather than attempt to put it all here in the forum, that you add a Gist.

     

    I’m going to go ahead and edit your posts to remove the code…

     


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #38430

    ModernMuse
    Participant
    Post count: 54

    Thanks, Susan!

    Adding a gist instead. ;)


    #38435

    ModernMuse
    Participant
    Post count: 54

    Anna, the large block of code posted above should have been in a Gist. My apologies, I’m trying to help, but I’m new at posting code in forums.

    Use the code below to replace lines 1529 through 1765 in your stylesheet…

    If you can’t see the code in this reply, you can also find it here.


    #38546

    Annaedv
    Participant
    Post count: 39

    Hello! And THANK`S! That worked!

    If I put in the code through Dreamweawer the @media is not linked and your first code works. I dont know the word “Gist”???, I will ask a english friend when he comes by.

    But still, the first one works! I am very pleased and impressed!

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Minimum responsive looks not okey’ is closed to new replies.