Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #694352

    chchew
    Participant

    Hi,

    I am newbie with WordPress, please bear with me and provide layman guidance as much.
    WP: 4.3.1
    X Themes: 4.2.2
    Cornerstone: 1.0.10
    http://goforcrumbs.com

    I have three questions.

    Q1 I wish to set the header image to full width size.
    The following have been set.
    1) Page Template: Blank – No Container
    2) Row settings: Column Container = OFF
    css settings as per attached.

    Unfortunately, the image does not scale to full size.

    Q2. How can I control the height of the image? Can I make the image occupying full screen (Eg: http://www.uber.com) or sometimes I want to control leaving 20% of free space from the bottom?

    Q3. I have 4 smaller images below the header images. I would like to scale them so that they have minimal white spaces between each images. And each images are scaled and fully occupy the full width.
    I am looking at http://www.apple.com

    Many thanks.

    #694388

    Thai
    Moderator

    Hi There,

    Thanks for writing in!

    Try adding following CSS under Customize > Custom > CSS:

    @media (min-width: 768px){
        .home #x-section-1 .x-1-1 .x-img {
            width: 100%;
            height: calc( 100vh - 90px );
            margin-bottom: 0;
        }
        .home .x-container {
            width: 100%;
            max-width: 100%;
        }
        .home #x-section-1 .x-column.x-1-4 {
                width: calc( 25% - 2px );
                margin-right: 2px;
        }
        .home #x-section-1 .x-column.last, 
        .home #x-section-1 .x-column:last-of-type {
            margin-right: 0;
        }
    }

    Hope it helps.

    #694435

    chchew
    Participant
    This reply has been marked as private.
    #694577

    Nico
    Moderator

    Hi There,

    Little not sure which part you want to adjust. Would you mind sharing us a screenshot of which header’s you want to adjust.

    You can attach the image using the file attachment below.

    Thanks.

    #694691

    chchew
    Participant

    Hi,

    I am attaching the screenshot.

    #694755

    chchew
    Participant

    Uploading again. The previous file seems not uploaded.

    #694760

    chchew
    Participant

    Uploading.

    #694824

    Rue Nel
    Moderator

    Hello There,

    Please go to your customizer and adjust the navbar top height. You may find this in Appearance > Customize > Header > Navbar. You may also need to adjust the logo top and bottom alignment. And also the top link align.
    Appearance > Customize > Header > Logo – Alignment
    Appearance > Customize > Header > Link – Text

    If you want to control the space at the bottom of you section, you can insert a gap element. You can then set how many pixels or 20% as the height of the gap element.

    To get your 4 images into a fullwidth tow, please click on the row settings and make sure that column container is disabled and marginless columns is enabled. Then you will have this: http://prntscr.com/9b7fla

    Perhaps you can try this: https://drive.google.com/open?id=0B4dpH_Gw-gtZcVdGQnFXYlBvNm8 sample template which you can upload in the layouts tab > templates and add it as block.

    Hope this helps.

    #694842

    chchew
    Participant

    Thanks for your patience and helpful guide. I am building up the skeleton now. I am uploading my screenshot. I require a white padding to let the images have some breathing space. How can I do it?

    #694863

    Rue Nel
    Moderator

    Hello There,

    Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

    .x-column .x-img {
      margin: 0 auto;
      padding: 2px;
      padding-right: 0px;
    }
    
    .x-column:last-child .x-img{
      padding-right: 2px;
    }

    Hope this helps. Please let us know how it goes.

    #694870

    chchew
    Participant

    Few pointers, help please.

    1. How to adjust the horizontal placement of logo text?

    2. The background image appears too small. It should occupy 80% of the screen (need to increase height). Leaving the 4 images at the bottom of the background image.

    3. White spacing is good – Solved.

    4. Upon applying your given template to CS, my original DEMO/Integrity/1 template is gone. I need them to appear right after my home page by allowing user to scroll below. Possible?

    #694884

    Rue Nel
    Moderator

    Hello There,

    1] You can adjust your logo in the customizer, Appearance > Customize > Header > Logo – Alignment and adjust the top logo alignment from there.

    2] Please edit your section and make sure to insert a top and bottom padding of 10%. This will increase the height of the section. Please keep in mind that background images do not display the fullwidth because it is positioned at the very center of the section and it covers the whole area. It automatically adjust itself to avoid any white spaces around the background image.

    3] Good to know.

    4] You should have applied the page template as a block. When you select “page”, it replaces the whole content which is what had happen to your site. If in anyway, you no longer have it, you may try this page template as a page instead.
    https://drive.google.com/file/d/0B4dpH_Gw-gtZcDF2RDNPZHFIb3c/view?usp=sharing

    And please do not forget to insert the custom css in the settings tab, Settings > Custom CSS

    .white-text {
      color: #fff;
    }
    
    .x-column .x-img {
      margin: 0 auto;
      padding: 2px;
      padding-right: 0px;
    }
    
    .x-column:last-child .x-img{
      padding-right: 2px;
    }

    Hope this helps.

    #694915

    chchew
    Participant

    Thank you so much and appreciate for your help. I am glad to have chosen X themes. Your support is rock solid.

    I am good for now. Please proceed to close this thread.

    Cheers!

    #694923

    Rad
    Moderator

    You’re soo much welcome! Cheers!