www.wysiwygwebbuilder.com

I recently created an html object and styled it using css giving it a border and white background then giving it 20px padding all round the contents. Viewed in desk top - perfect, on mobile, Chrome had to make padding, bottom 140px just so contents viewed appeared within border. The compromise being the desktop version has a 120px blank space on the bottom so that the mobile appearance can be correct.
Is there a way around this?
Or is this just the game we have to play to get mobile browsers to display objects correctly.
The contents of the object is text within <span></span>.
Is it something to do with the way different browsers treat text?
The page is here:
https://www.whiteshepherdsnz.com/memtzarAboutUs.html
Still have to add a couple more break points to fix mobile browsing.
Regards
Roger

To apply different styling for smaller screen you can use media queries, then you can set a different padding for mobile devices.