Can you please help me to fix a few issues on this one page site.
1) The header when viewed on mobile is too big (white space). I understand that I have email and phone number and that it only shows the number on the responsive design, but how to I get the white space to be reduced for better responsive design.
2) The red banner above the slider is showing white space. It was fine before, and now I can’t figure out why there is space. If I scroll up it goes away.
3) The Banner slider that has three images that scroll are displaying too big, and are not being displayed correctly on responsive design for mobile. Do I need to change the size?
4) the scroll arrows on banner slider are not reducing for responsive design. How do I fix this? Do I need to add something in CSS?
Your help to provide solutions would be greatly appreciated.
2) This issue occurs only when you reload the page in mobile resolutions (smartphones/tablet’s) and then resize to a desktop resolution, right ? This is being caused because the header should always have the same height in all resolutions. You can fix this following this steps:
2.1) First remove this extra row in your code:
2.2) Add in (css/custom.css):
min-height: 0 !important;
3) Unfortunately is impossible to have a image 100% responsive on the slider. We recommend don’t use texts on the images. Instead of it you can add the texts as slide layers where you can control the positions for each resolution. Regarding the image, always will “cut” some part of the image.
4) To reduce the arrows size on mobile add in (css/custom.css):