[Resolved] Artisan, Parallax, words not working responsively

Home Forums Support Artisan, Parallax, words not working responsively

  • This topic has 12 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #991760
    Janet Davis

    Hello,
    I am using the artisan child theme. I am using elements for the parallax and adding words.
    It looks great on the desktop but not on any other side.
    The words don’t get smaller they take over the image.

    Is there a way to make this work so the parallax and words look great on all sizes.
    Thank you Janet

    #991762
    Leo
    Staff
    Customer Support

    Hi there,

    You can tweak the mobile font size by modifying this block of CSS in the Additional CSS field in the customizer:

    @media (max-width: 768px) {
        .hero-title {
            font-size: 32px;
            letter-spacing: 2px;
        }
    }

    If you want to modify the <h2> description as well, you can modify the CSS to this:

    @media (max-width: 768px) {
        .hero-title {
            font-size: 32px;
            letter-spacing: 2px;
        }
        .page-hero h2 {
            font-size: 20px;
        }
    }

    Let me know if this helps 🙂

    #991767
    Janet Davis

    Leo,
    I tried both and there was no change.

    Thank you
    Janet

    #991810
    Leo
    Staff
    Customer Support

    Looks like you didn’t change the font size?
    https://www.screencast.com/t/kca1IkpOKh1

    You can also just modify the existing CSS to avoid duplicate:
    https://www.screencast.com/t/ay62H8LcQ

    #991912
    Janet Davis

    I put the code into the css and it didn’t change anything so I took it out.

    When the page is viewed on a tablet and an iPhone the words are covering the face on the picture. I just want it all to get smaller and fit in the space.

    Thank you
    Janet

    #991949
    Janet Davis

    I ended up just making an image with the wording on the image.
    I didn’t change anything else except the image. Now when the page comes up it doesn’t show the parallax area. I have to scroll up to see it.

    Please advise how to get this to work better. Also How do I get the image to be smaller, and not just top and bottom. Thank you again

    #991954
    Leo
    Staff
    Customer Support

    I’m still seeing duplicated CSS added as indicated here:
    https://www.screencast.com/t/ay62H8LcQ

    Can you remove the second block and modify the 32px in the first block to something smaller like 20px?

    I ended up just making an image with the wording on the image.

    I’m not seeing that in the page you linked and that’s not the good way to go.

    Can you make the changes above first?

    #991956
    Janet Davis

    Leo,

    I took off the extra css and change the first one in the manner you asked above.
    I also took off the image that had the image with the wording.
    Added back the verbiage in the element and the original image.

    I can not get the words to look right on all of the devices.

    Plus the image is way too big. I’ve tried different sizes and they all look like close ups taking over the entire screen. Though the iPhone looks best.

    https://hempcontentmarketing.com/why-me/ this is the page I’m working on.
    Thank you

    #992024
    Leo
    Staff
    Customer Support

    The font size of <h1> in page hero is set by this CSS in the Additional CSS field in the customizer:

    .hero-title {
        font-size: 40px;
        letter-spacing: 4px;
    }
    
    @media (max-width: 768px) {
        .hero-title {
            font-size: 20px;
            letter-spacing: 2px;
        }
    }

    The one with @media (max-width: 768px) is setting the mobile size.

    The size of the picture is determined by the padding settings:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

    Can you go through this article first and see if it helps at all?
    https://docs.generatepress.com/article/how-to-create-a-page-hero/

    #992191
    Janet Davis

    Thank you fro the additional information on the CSS. I will work with that.
    I did look at that article for the padding size and the size of the image. But thank you for pointing me back in that direction.

    I am not asking about how big the image area is for size. I am talking about the image itself.

    I’ve tried different image sizes and they all blow up to looking like the image is a close up instead of the image really is.

    Thank you again.
    Janet

    #992407
    Leo
    Staff
    Customer Support

    That’s because your background image itself is not wide enough and you are using the full width container option for the header element.

    Try something around 2000px in width.

    #993363
    Janet Davis

    Thank you for all your help. I changed the page parralax until I have more time to get new images and go from there.

    Janet

    #993373
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.