- This topic has 6 replies, 3 voices, and was last updated 6 years, 10 months ago by Tom.
November 15, 2016 at 12:36 pm #244615Webmaster
I love GP. I recently ran into where you may have a solution. Here is the website I am currently working on. http://cgeventsolutions.com/
The “page header” or featured image is repsonsive, but I was wondering how to make that background image different for viewports @728, @480… The logo and tagline shrink to small at those size and is barely legible. Do you have any ideas?November 15, 2016 at 1:02 pm #244616LeoStaffCustomer Support
I think this post should help: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/#post-239400
Let me know if it works!November 16, 2016 at 3:11 pm #244969Webmaster
It didn’t work. That post was helpful but I think when Tom commented there, it was an older version of GP.
I tried using his code, in two different style.css cheets, the child // and parent. Then I also tried changing “.site-header” to “.page-header, .page-header-image, etc.” If you have a moment maybe you can take a look at this website.
The orange “page header” is responsive but the text in the middle is too small when reducing viewports. Do you have any ideas on how to keep the text large?November 16, 2016 at 3:20 pm #244973LeoStaffCustomer Support
That code should work regardless which version of GP you are on.
Can you try adding the code by using the method here? https://generatepress.com/knowledgebase/adding-css/
Also to make it clear, the code provided does not make the background image responsive. It allows you to set a different image specific to mobile. In your case, you would want to create a similar image to what you already have but with larger texts so it’s visible on mobile.
Let me know if this is still confusing 🙂November 16, 2016 at 5:42 pm #244990Webmaster
I was actually using that plug-in 🙂
I have a screenshot here check this out.
Here are the three images at 480, 768, 1024 I would like to use.
Yes, that would be perfect if I could use these images instead of the current one at full size.
I also used the flush cache button and tried to ctrl+f5…November 16, 2016 at 6:03 pm #244991LeoStaffCustomer Support
Try the @media codes here for full screen and tablet: https://generatepress.com/forums/topic/image-setting-for-mobileresponsive/#post-239569
Right now it’s also using a file called top-bg-1.png instead of the .jpg you specified…
I would also stick with the px numbers Tom suggested for each device.November 16, 2016 at 8:18 pm #245020TomLead DeveloperLead Developer
Very rarely a good idea to use an image with text as a background image – someone somewhere will have a screen size where the text is cut off.
- You must be logged in to reply to this topic.