What to change in order to show picture in total on smaller devices?

Template unaltered: New Age

Next Section #downloads seems to be bound to size of screen. This way it cuts off the phone picture (on smaller devices).

See video demo: https://youtu.be/On6AbSxPfoo

What do I need to alter to make it bound to the phone picture instead?


I've tried margin-bottom: 600px on the Header, which does seem to work, but this way the background of this header won't walk all the way thru.

I've also tried a height of 200% on the Header, which works for smaller devices, but not for bigger devices.

I've replicated the method of creating a media-query to make such exceptions for particular viewports as shown here: https://youtu.be/deZ0C6oS2gw?t=1227

But it still overrides the 200% on all sizes.

You know that this image doesn't pop up on mobile devices, right xD? It's hidden by default in this template, so... and stop using normal web browser for testing websites for mobile devices... start using real phone or built in tools in the web browsers

Wrong. It doesn't get hidden. It shows a part of it. and then gets cut off. See: https://imgur.com/a/DxtPdWm

Ofcourse, I'm using a Android device + iOS device to test too. But this desktop recording was quickest to show demonstration.

Make sure your doing your settings for mobile first. Remember that when you set a class/id on something, it automatically defaults to the phone size first and then anything you add after that you need media queries to tell it which size it should change on and to what.

On the header with the class masthead remove the last part of the inline style

background:url('bg-pattern.png'), linear-gradient(to left, #7b4397, #dc2430);height:100%;


background:url('bg-pattern.png'), linear-gradient(to left, #7b4397, #dc2430);


You saved me again! This indeed simply works on the template itself. However on my customized variant of it, I needed to add 250% on the .masthead aswell, then delete that 100% height. Consider it fixed.

I experimented a little with some animation, media queries. Having the ability to convert the inline style to css using the extract tools option is a really nice feature.

Also, I see developers of advanced B4 templates using background url in inline styles and quite honestly I still dont know what the advantage is other than it gives the user of the template a easy way to change the image. Really belongs in the css stylesheet just like js should not be in html (onclick etc).