Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #194886

    Hello

    First off loving the theme in general, great job.

    I’m working on a new site at: http://www.jelfon.com/nr1/

    We are only in the very early stages at the moment, but we’d like to make the whole site narrower as there is not a huge amount of text content in general, so the less space to fill the better.

    Ideally I’d like to try the site width at 960px wide by default, and we want to keep it responsive.

    We are using the default width in “Responsive Layout” so the 1030px option and as you can see we are using the boxed mode and the last Header option with the bottom menu.

    Ideally I’d like to make the overall site approx 960px wide and reduce the default spacing from the current 50px to 25px.

    I started the process by following a few forum posts and did manage to achieve some of the changes, but not all of them properly, so have just gone back to closer to the default settings and removed some of the extra CSS I’d applied in my tests.

    This is another small issue and not related to above, but if you look at my progress at the narrow size:
    http://responsivedesignsimulator.com/?http://www.jelfon.com/nr1/

    TOP PHONE / EMAIL – How to move it down on the smallest view.
    The top phone number and email is too close to the top of the browser, so can you help me move it down a little bit in the narrow view so on an iPhone for example, I’d like to move it down just so there’s a bit of room above, even 10px would make it look a lot better.

    If you can help I’d be very grateful.

    Thanks
    Joe

    • This topic was modified 11 months ago by  joerainbow.
    #195038

    Hi joerainbow!

    1.) You can add this on your custom.css or Quick CSS:

    /* #Desktop - Large
    ================================================== */@media only screen and (min-width: 1140px) {
      .responsive .boxed#top {
        width: 960px;
      }
      .responsive .container {
        width: 860px;
      }
      .responsive .container .one.unit,
      .responsive .container .one.units {
        width: 20px;
      }
      .responsive .container .two.units {
        width: 30px;
      }
      .responsive .container .three.units {
        width: 120px;
      }
      .responsive .container .four.units {
        width: 210px;
      }
      .responsive .container .five.units {
        width: 300px;
      }
      .responsive .container .six.units {
        width: 390px;
      }
      .responsive .container .seven.units {
        width: 480px;
      }
      .responsive .container .eight.units {
        width: 570px;
      }
      .responsive .container .nine.units {
        width: 660px;
      }
      .responsive .container .ten.units {
        width: 750px;
      }
      .responsive .container .eleven.units {
        width: 840px;
      }
      .responsive .container .twelve.units {
        width: 930px;
      }
      .responsive #top.boxed .stretch_full {
        width: 960px;
      }
      .responsive #top .offset-by-one {
        padding-left: 90px;
      }
      .responsive #top .offset-by-two {
        padding-left: 180px;
      }
      .responsive #top .offset-by-three {
        padding-left: 270px;
      }
      .responsive #top .offset-by-four {
        padding-left: 360px;
      }
      .responsive #top .offset-by-five {
        padding-left: 450px;
      }
      .responsive #top .offset-by-six {
        padding-left: 540px;
      }
      .responsive #top .offset-by-seven {
        padding-left: 630px;
      }
      .responsive #top .offset-by-eight {
        padding-left: 720px;
      }
      .responsive #top .offset-by-nine {
        padding-left: 810px;
      }
      .responsive #top .offset-by-ten {
        padding-left: 900px;
      }
      .responsive #top .offset-by-eleven {
        padding-left: 990px;
      }
    }

    2.) Please use this:

    @media only screen and (max-width: 767px) {
    .responsive.social_header .phone-info {
    position: relative;
    top: 5px;
    }
    }

    Best regards,
    Ismael

    #195079

    Hello Ismael

    Thanks for your help with this, it’s much appreciated.

    So far I’ve added the 2 pieces of CSS outlined above and am happy with the result, so thanks for that.

    Working Progress:
    http://www.jelfon.com/nr1/

    There is one more issue that I did outline originally, see my first post, but I’m now outlining the issue in more details below:

    … and reduce the default spacing from the current 50px to 25px

    I’ve just spent ages trying to figure this out, and although I was getting very close by making various further CSS customizations, things weren’t quite working correctly still especially in responsive modes, so I’d appreciate a bit more help with this aspect.

    As far as I can tell all content is indented by approx 50px (sides and top) at the moment and I’d like to be able to adjust this to either 30px or 25px.

    Below should be an image illustrating with blue boxes the spacing elements that are currently approx 50px, I’d like to be able to change these to 30px or 25px to tighten it all up a bit design wise.

    spacing issue

    Thanks again
    Joe

    • This reply was modified 11 months ago by  joerainbow.
    #195188

    Hey!

    You can reduce the top and bottom padding using this:

    .content, .sidebar {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    Adjust the menu right margin using this:

    #header_main_alternate .container {
    margin: 0;
    }

    Phone number:

    #header_meta .container {
    margin: 0 70px 0 70px;
    }

    Social Icons:

    #header_main .social_bookmarks {
    right: -30px;
    }

    Logo:

    .bottom_nav_header.social_header .logo {
    position: relative;
    left: -20px;
    }

    Regards,
    Ismael

    #198029

    Hello Ismael

    Thanks for your latest response and for the extra CSS.

    I am happy with the overall width of things I just want to reduce the spacing properly as outlined above.

    I tried adding the latest CSS elements outlined above to reduce the spacing and it doesn’t work properly when I add it, so I’ve removed the latest CSS as outlined in your latest response.

    The bottom section of this post is the current CSS I have in my Child Theme.

    When I added the code below for example, the responsive menu also sat on the far right with no space which doesn’t look good.

    Adjust the menu right margin using this:
    #header_main_alternate .container {
    margin: 0;
    }

    Can I maybe send you the WP login info and get you to have a look. If so, please let me know where to send this privately, thanks.

    CSS CODE BELOW DOTS:
    ……………………………………….
    /*
    Theme Name: Enfold Child
    Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
    Version: 1.0
    Author: Kriesi
    Author URI: http://www.kriesi.at
    Template: enfold
    */

    /*Add your own styles here:*/

    .social_header .phone-info span {
    font-weight: normal;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0px;
    font-size: 11px;
    }

    .responsive #header_meta .social_bookmarks {
    padding-bottom: 0px;
    width: 100%;
    }

    .main_color .heading-color, .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color .sidebar .current_page_item > a, .main_color .sidebar .current-menu-item > a, .main_color .pagination .current, .main_color .pagination a:hover, .main_color strong.avia-testimonial-name, .main_color .heading, .main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong, .main_color div .news-headline {
    color: #90d200;
    font-weight: normal;
    }

    p + h3, p + h4, p + h5, p + h6 {
    margin-top: 0px;
    }

    .title_container { display: none; }

    #top .main_menu .menu > li:last-child > a {
    padding-right: 13px;
    }

    .logo img {
    display: block;
    height: auto;
    max-height: 100%;
    padding: 0;
    width: auto;
    }

    /* #Desktop – Large
    ================================================== */@media only screen and (min-width: 1140px) {
    .responsive .boxed#top {
    width: 960px;
    }
    .responsive .container {
    width: 860px;
    }
    .responsive .container .one.unit,
    .responsive .container .one.units {
    width: 20px;
    }
    .responsive .container .two.units {
    width: 30px;
    }
    .responsive .container .three.units {
    width: 120px;
    }
    .responsive .container .four.units {
    width: 210px;
    }
    .responsive .container .five.units {
    width: 300px;
    }
    .responsive .container .six.units {
    width: 390px;
    }
    .responsive .container .seven.units {
    width: 480px;
    }
    .responsive .container .eight.units {
    width: 570px;
    }
    .responsive .container .nine.units {
    width: 660px;
    }
    .responsive .container .ten.units {
    width: 750px;
    }
    .responsive .container .eleven.units {
    width: 840px;
    }
    .responsive .container .twelve.units {
    width: 930px;
    }
    .responsive #top.boxed .stretch_full {
    width: 960px;
    }
    .responsive #top .offset-by-one {
    padding-left: 90px;
    }
    .responsive #top .offset-by-two {
    padding-left: 180px;
    }
    .responsive #top .offset-by-three {
    padding-left: 270px;
    }
    .responsive #top .offset-by-four {
    padding-left: 360px;
    }
    .responsive #top .offset-by-five {
    padding-left: 450px;
    }
    .responsive #top .offset-by-six {
    padding-left: 540px;
    }
    .responsive #top .offset-by-seven {
    padding-left: 630px;
    }
    .responsive #top .offset-by-eight {
    padding-left: 720px;
    }
    .responsive #top .offset-by-nine {
    padding-left: 810px;
    }
    .responsive #top .offset-by-ten {
    padding-left: 900px;
    }
    .responsive #top .offset-by-eleven {
    padding-left: 990px;
    }
    }

    @media only screen and (max-width: 767px) {
    .responsive.social_header .phone-info {
    position: relative;
    top: 10px;
    }
    }

    .bottom_nav_header.social_header .main_menu ul:first-child > li a {
    border-right-style: solid;
    border-right-width: 1px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    text-transform: uppercase;
    font-weight: bold;
    }

    #198120

    Hi!

    You mobile menu looks fine on my end http://i.imgur.com/R5Ahw6x.png Please flush browser cache on your mobile device.
    You can make your posts private by checking ” Set as private reply (Only you and moderators will see the content of this post)” above Submit button

    Best regards,
    Yigit

    #198140
    This reply has been marked as private.
    #198331

    Hi!

    You are going to need to hire a freelance developer for that kind of customization as it is beyond the scope of support we can provide. You can also request quote here.

    Regards,
    Yigit

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

You must be logged in to reply to this topic.