Home Forums Porto Template Responsive Design for Banner Images, Banner arrows, Header Height

  • This topic has 1 reply, 2 voices, and was last updated 5 months ago by Support2. This post has been viewed 191 times
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10030516

    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.
    Thank you,



    1) On this type of header you need to mantain some content on the “white space” in all resolutions (phone or email). Please take a look in our Demo Law Firm where we use the same type of header: http://preview.oklerthemes.com/porto/4.9.3/demo-law-firm.html

    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):

    #header {
    	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):

    @media(max-width: 767px) {
    	.uranus.tparrows:before {
    		font-size: 16px;

    Please try that and let us know if you need further assistance.

    Kind Regards,


Viewing 2 posts - 1 through 2 (of 2 total)