- This topic has 12 replies, 2 voices, and was last updated 4 years, 7 months ago by Leo.
-
AuthorPosts
-
August 23, 2019 at 10:32 am #991760Janet 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 JanetAugust 23, 2019 at 10:39 am #991762LeoStaffCustomer SupportHi 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 ๐
August 23, 2019 at 10:43 am #991767Janet DavisLeo,
I tried both and there was no change.Thank you
JanetAugust 23, 2019 at 11:39 am #991810LeoStaffCustomer SupportLooks like you didn’t change the font size?
https://www.screencast.com/t/kca1IkpOKh1You can also just modify the existing CSS to avoid duplicate:
https://www.screencast.com/t/ay62H8LcQAugust 23, 2019 at 3:18 pm #991912Janet DavisI 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
JanetAugust 23, 2019 at 6:14 pm #991949Janet DavisI 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
August 23, 2019 at 6:33 pm #991954LeoStaffCustomer SupportI’m still seeing duplicated CSS added as indicated here:
https://www.screencast.com/t/ay62H8LcQCan you remove the second block and modify the
32px
in the first block to something smaller like20px
?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?
August 23, 2019 at 6:54 pm #991956Janet DavisLeo,
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 youAugust 23, 2019 at 10:31 pm #992024LeoStaffCustomer SupportThe 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-heightCan you go through this article first and see if it helps at all?
https://docs.generatepress.com/article/how-to-create-a-page-hero/August 24, 2019 at 5:30 am #992191Janet DavisThank 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.
JanetAugust 24, 2019 at 9:27 am #992407LeoStaffCustomer SupportThat’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.
August 25, 2019 at 5:21 pm #993363Janet DavisThank you for all your help. I changed the page parralax until I have more time to get new images and go from there.
Janet
August 25, 2019 at 5:55 pm #993373LeoStaffCustomer SupportNo problem ๐
-
AuthorPosts
- You must be logged in to reply to this topic.