Hi,
I am customising my home page and there are certain blocks and <div> elements that do not look good when my responsive theme is resized down to 480 px or when viewed in a mobile device.
The first image shows a banner & text area (highlighted with a red box) as it looks on my home screen on a desktop. However, when resized down and viewed on a mobile device as illustrated in the second image it takes up too much of the screen.
Below image is how my home page looks on a desktop
Below image is how the same section of the home page looks when scaled down to 480px or when viewed on a mobile device.
This is the code for the section with a red boarder
<div style="background: center center; background-image: url({{media url='wysiwyg/infortis/ultimo/custom/background/background02.jpg'}});">
<div class="container">
<div class="inner-container" style="text-align: center;">
<div style="display: inline-block; padding: 91px 0; color: #26525f;">
<h1 style="font-size: 40px;">Giggleberries</h1>
<h2 style="font-size: 20px;">Giggleberries is a fashionable retailer of popular designer mens underwear, swimwear and socks. We stock an extensive range of briefs, mens thongs, mens boxers, plus trendy swimwear and socks for men. We only stock designer brands that will meet your expectation for quality, style, fit and distinctiveness.</h2>
</div>
QUESTION
Is it possible for me to set this to be hidden when the page is resized down to say 480px or when viewed on a mobile device?
Thanks
James
