Header image and text responsiveness

  • Author
    Posts
  • #156341

    veronicawoodque
    Member
    Original poster

    Hi! You helped me make some customisations to the header of my homepage. So, I have my image set to the right of the page, and my text to the left. It looks really good in mobile (the image is removed and text centralised) and really good on a big screen (text and image are side by side).

    I am really struggling with the in-between size. On screens between a landscape tablet (1025px) up to a small laptop (1300px) the text overlaps onto the picture, or the text box is on the left of the page with no picture (but I think the picture is hiding and messing with the text).

    If I increase the padding to the right of the text, it then makes the text too small on a big screen. I’ve tried different media screen settings but it doesn’t work, or it messes with any existing customisations. I’ve been trying to fix this for about five hours :-( I am sure it was working fine a few weeks ago, I am not sure what’s happened now.

    Ideally, what I would like is for the mobile view to apply to the in-between screen size, so, no picture and a centralised heading. I am really hoping you can give me the correct CSS to do this. Thank you in advance!

    The blog I need help with is: intothewoodsmarketing.com

    #156397

    anarieldesign
    Theme Author

    Hi,

    thank you for using our theme.

    You can try to add this to the Custom CSS:

    @media (max-width: 1320px) {
    .page-template-main-page .cd-fixed-bg {
        background: none;
    }
    .content-caption {
        max-width: 100%;
    }
    .page-template-main-page .cd-fixed-bg .content-caption .entry-content .cd-main-content .has-text-align-left {
        text-align: center;
    }
    }

    Let me know if this helps.

    All the best,
    Ana

    #156420

    veronicawoodque
    Member
    Original poster

    Hi Ana, I am afraid that hasn’t worked and it has made the header very wide.

    I think I will ask a web developer to take a closer look at the CSS I have done and try to figure it out for me :-( But I appreciate your help and the customisations I have found through the forum.

    Thank you :-)

    #156422

    anarieldesign
    Theme Author

    Hi,

    I can recreate your header part on my test site and will see how I can help you with.
    I’ll do this on Monday and will write you back.

    Have a lovely weekend,
    Ana

    #156460

    veronicawoodque
    Member
    Original poster

    That’s so kind of you, thank you :-)

    #156493

    anarieldesign
    Theme Author

    Hi,

    sorry I didn’t have time to check it out. Can you please send me Custom CSS you are using for the top part so I can recreate it on my test website tomorrow and see how I can help you with.

    All the best,
    Ana

    #156672

    veronicawoodque
    Member
    Original poster

    Hi Ana, sorry I think I mis-read your message the first time around! So, sorry for the delay.

    Here is the CSS for the top, thank you again for doing this:

    @media (max-width: 1025px) {
    .page-template-main-page .cd-fixed-bg {
    background: none;
    margin-top: -100px;
    margin-bottom: -100px;
    }
    }

    @media (max-width: 1025px) {
    .page-template-main-page .cd-fixed-bg .content-caption .entry-content .cd-main-content .has-text-align-left {
    text-align: center;
    }
    }

    @media (max-width: 1025px) {
    .page-template-main-page .cd-fixed-bg {
    text-align: center;
    }
    }

    .home .content-caption {
    margin-left: 0;
    margin-top: -60px;
    }

    body.home .content-caption {
    background: none;
    color: #000;
    padding: 0 100px px;
    }

    .page-template-main-page .cd-fixed-bg {
    filter: none;
    }

    .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline {
    background-color: transparent;
    border: 2px solid;
    border-color: #e8bf14;
    }

    .entry-content a.wp-block-button__link:hover {
    border: solid;
    }

    #156751

    anarieldesign
    Theme Author

    Hi,

    you can try to add this to the Custom CSS:

    @media (max-width: 1300px) {
    .page-template-main-page .cd-fixed-bg {
    background: none;
    margin-top: -100px;
    margin-bottom: -100px;
    text-align: center;
    }
    }

    Let me know if this helps.

    All the best,
    Ana

    #156932

    veronicawoodque
    Member
    Original poster

    Hi Ana, it’s all sorted now. Thanks so much for your help, I love this theme!

    #156999

    anarieldesign
    Theme Author

    You are very welcome.

    All the best,
    Ana

The topic ‘Header image and text responsiveness’ is closed to new replies.