i want my mobile password page to be same as my desktop one. I want the mobile version to have the description / email box overlapping the background image in the centre just like desktop version. I also want the background image to have darker opacity just like the desktop version. (password page currently enabled)
Topic summary
A user wants their mobile password page layout to match the desktop version, specifically requesting the description/email box to overlap the background image centrally with darker opacity on the image.
Solution Provided:
- Set mobile content alignment to Center
- Uncheck “Show content below image on mobile”
- Adjust image overlay opacity (example: 50%) to darken the background
- Changes apply to both desktop and mobile views
- Custom CSS can be added for further customization
Follow-up Questions:
- One user asks how to make the black box slightly transparent
- Another user (using Dawn theme) asks how to remove white space between content and footer when the email signup form overlaps the image
1 Like
Hi @suoshie ,
This is Kate from PageFly - Landing Page Builder App. I would love to give you my recommendation.
1. “I want the mobile version to have the description/email box overlapping the background image in the center just like the desktop version”
To do this, you should set Center for Mobile content alignment, and uncheck the “Show content below image on mobile” box here
The mobile view will look like this
2. “I also want the background image to have darker opacity just like the desktop version.”
To do this, you just simply need to set the opacity for the image overlay. For example, I set 50% for Image overlay opacity
It will look the same for both desktop and mobile views
You can also further customize your page’s look by adding some custom css at the bottom here
After you finish, don’t forget to hit Save to reflect the changes on the live view.
Desktop:
Mobile:
I hope you will find my answer helpful!
Warm regards,
Kate | PageFly
it works thank you so much! Do you know how i can make the big black box slightly transparent?
Do you know how to remove the space between the content and the footer? I have my email sign up form over the image like you instructed but it leaves a huge white space. I’d the image to cover the entire main section. I have the Dawn theme.