Home Page – Responsive Margin width

Home Forums WordPress Theme Lotek — Modern App Landing Page WordPress Theme Home Page – Responsive Margin width

This topic contains 5 replies, has 2 voices, and was last updated by  CTHthemes 2 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #4054

    PJH8RN
    Participant

    Unknow

    Hi,

    thank you for all your help in resolving the responsive image sizing unfortunately I am now left with a huge, huge, margin/space between the image and the menu bar, which was also discussed in reply #3703. The margin spacing only occurs when the site is viewed on on a tablet or smartphone, can the margin be reduced?

    The current custom CS code that I have installed is as follows:

    .home-contain {background-color:transparent;}

    .bg-slider {background-size:contain;}

    @media (min-width:320px) and (max-width:360px){

    .wpcf7-captchar {width:100px;}
    .bg-slider {
    height: 129px;
    }

    }

    @media (min-width:360px) and (max-width:520px){

    .wpcf7-captchar {width:200px;}
    .bg-slider {
    height: 187px;
    }

    }
    @media (min-width:520px) and (max-width:768px){

    .wpcf7-captchar {width:300px;}
    .bg-slider {
    height: 267px;
    }

    }
    @media (min-width:768px) and (max-width:992px){

    .bg-slider {
    height: 356px;
    }

    }

    I have left the site up with his code in place in order that you can see the margin issue when viewed on a smartphone or tablet, the url is: : http://kleankorners.co.uk/

    Once again many thanks for your help in resolving this problem.

    PJH8RN

    #4085

    CTHthemes
    Keymaster

    Hi,
    Would you send me some screenshots? Thanks.

    #4142

    PJH8RN
    Participant

    Unknow

    Hi,

    I have attached 3 screenshots, the first 2 are from a samsung S4 phone and the 3rd from a Sony tablet. The Samsung shots show the distance between the image header and the navigation bar and the Sony does the same but; as it has a larger screen the margin width is fully visible.

    Thank you for your help

    Paul

    Attachments:
    You must be logged in to view attached files.
    #4179

    CTHthemes
    Keymaster

    Hi,
    1, Change

    @media (min-width:360px) and (max-width:520px){
    
    .wpcf7-captchar {width:200px;}
    .bg-slider {
    height: 187px;
    }
    
    }

    to

    @media (min-width:360px) and (max-width:520px){
    
    .wpcf7-captchar {width:200px;}
    .bg-slider {
    height: 187px;
    }
    .bgslider-wrapper {
    height: 134px;
    }
    }
    
    #4201

    PJH8RN
    Participant

    Unknow

    Thank you so much, problem resolved.

    your support is greatly appreciated

    Paul

    #4232

    CTHthemes
    Keymaster

    Thank you. Don’t forget rate it 5 stars on TF 🙂

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

You must be logged in to reply to this topic.