Home Page 1

This topic contains 9 replies, has 2 voices, and was last updated by  PJH8RN 3 years, 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #3532

    PJH8RN
    Participant

    Unknow

    Hi, I have removed the header content from the Home page and uploaded my own banner image jpg 1902 x 682. The image is a scaleable, vector, converted from within Photoshop to a jpg.

    My problem is that the image I have uploaded is not displayed responsively and does not locate correctly when using devices other than a PC and I am not sure why. I have used your theme before and have not encountered this problem when using my own header images.

    The site url is: http://kleankorners.co.uk/

    Many thanks

    PJH8RN

    #3555

    CTHthemes
    Keymaster

    Hi,
    Please use background image with 1280x680px in size. Thanks.

    #3565

    PJH8RN
    Participant

    Unknow

    Hi,

    Having placed a 1280 x 680 image I now find that the size works for tablets, phones etc but does not work for PC screens. I have re-instated the 1900 x 680 bg image and now find that it is partially responsive, the image loads but does not centre.

    I then reloaded the demo bg3 image (1900 x 680) and it is apparent that this image does not center either. The issue is more apparent if the header image needs to be centered.

    Do you have a css workaround that ensures the header images is centered and, if necessary, scales responsively or alternatively calls a smaller image if the page loads on a non PC screen?

    #3587

    CTHthemes
    Keymaster

    Hi,
    Please upload a image which best for you then I will check and give a modification. Thanks.

    #3607

    PJH8RN
    Participant

    Unknow

    Hi the image is loaded it is a 1902 x 682 jpg.

    I am not using any custom CSS and have not made any modifications to the core files.

    many thanks

    PJH8RN

    #3633

    CTHthemes
    Keymaster

    Hi,
    Please add this custom style to Theme Options -> Custom code tab:

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

    thanks.

    #3703

    PJH8RN
    Participant

    Unknow

    Thank you that certainly scales/resolves the image but unfortunately, when viewed from a tablet or phone it leaves a huge margin between the image and the navigation menu, can an extra line of code be added to decrease the margin size and resolve this problem?

    Also the image only centers when the tablet or phone is in a portrait position, when either are turned to a landscape position the image slips slightly to the RH side of the screen. Can the codebe modified to ensure that this does not happen?

    I have left the custom code version in place in order that you can see these issues. The web URL is: http://kleankorners.co.uk/

    Once again many thanks for all your help

    • This reply was modified 3 years, 2 months ago by  PJH8RN. Reason: I missed out a crucial explanatory note .. Doh
    • This reply was modified 3 years, 2 months ago by  PJH8RN.
    #3720

    CTHthemes
    Keymaster

    Hi,
    here you go:

    @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;
    }

    }

    #3848

    PJH8RN
    Participant

    Unknow

    Thank you so much this has resolved everything except the huge, huge, margin/space between the image and the menu bar, which was also discussed in reply #3703. 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

    • This reply was modified 3 years, 2 months ago by  PJH8RN. Reason: I missed a word out
    #3922

    PJH8RN
    Participant

    Unknow

    Hi, did you manage to take a look at the margin issue see reply
    #3848

    if the problem is becoming too complex I am willing to purchase a solution

    many thanks

    PJH8RN

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

You must be logged in to reply to this topic.

Hello! CityBook version 1.2.7 was released. Bulk Import Add-On, OpenStreetMapView Details
+