Archived topic
Element Padding on Mobile Devices
7 replies · Started by Austin on June 21, 2021
Hi,
I have added Elements for the "Search Results Page" and "No Search Results" adding padding to both sides so that it is not full width. However it is still full width on mobile. Is it possible to adjust the padding on these pages for mobile? Also, on the "No Search Results" page the icon is just a blank square to search. Is it possible to add "Search" text or a fa-search icon? Anything to make it more user friendly would help.
Example of icon on No Search Results page - https://orprops.com/?s="alabama"
Thanks
Hi Austin,
Have you tried setting the padding on Appearance > Customize > Layout > Container and set the content padding for mobile?
- https://share.getcloudapp.com/4gunljbr
Let us know if it works.
Hey Elvin, I wasn't sure if that would override individual page layouts? If I build a page with generate blocks and set the dimensions there, will the padding in the container section apply, or the generate blocks settings (i.e. full page width, background color touching both sides)? Thanks
It's a global setting so it would apply to all the pages unless you have a Layout Element that specifically sets some pages to go full width(no padding) or you use WordPress' alignfull setting - https://share.getcloudapp.com/yAuryYJx - which overrides everything.
If you're using the alignfull settings, you'll have to apply the padding to the container blocks manually through the UI or by globally applying a margin or a padding to them by custom CSS.
Gotcha. Ok thanks I will mess around with it and see if I can get it set. Is there a fix to the button issue on No Search Results other than it being a gray square with no info? Appreciate the help
Can you try changing the site's icon type to SVG? You can set it on Appearance > Customize > General.
https://share.getcloudapp.com/v1uY0ezY
Hey Elvin, that fixed it. Thanks
Nice one. No problem. :)
