About Visual Problems

Home Forums Porto – Responsive HTML5 Template About Visual Problems

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10044327
    keydesignart
    Participant

    Hello. I have some problems with the appearance of the site. I would appreciate it if you could help me with these issues. These are:

    1- There is a view on the Home Page as in “Image-1”. However, when we switch to the mobile screen, it looks like “Image-2”. What I want to do about this is that the black part is slightly transparent (about 20%) and the rest of the image appears in the back. In addition, when I look at it on mobile, the image and the black background completely disappear. These should not disappear either.

    Image-1: https://prnt.sc/bXolt8iZmH5J
    Image-2: https://prnt.sc/wn6E-Uo70mUV

    2- As in “Image-3”, there is an unnecessary gap on the right side. I need to eliminate this.

    Image-3: https://prnt.sc/grxfnyFnjD0l

    3- As you can see in “Image-4”, the pop-up section that opens above creates a visual problem because it does not fit on mobile. How can we make this mobile compatible?

    Image-4: https://prnt.sc/qWwmFYNBEd5w

    4- Finally, if I want to use a video instead of an image in the first item, how should I proceed?


    #10044329
    Support
    Keymaster

    Hello,

    1) What is making the image disapear is this code: https://i.imgur.com/anfYLtJ.png (remove that) – and my suggestion is to use this:

    (css/custom.css)

    @media (max-width: 575px) {
    	.custom-background-style-1 {
    		&:before {
    			content: " ";
    			display: block;
    			position: absolute;
    			height: 100%;
    			top: 0;
    			left: 0;
    			right: 0;
    			background: rgba(0, 0, 0, 0.7);
    		}
    	}
    }

    2) Change the container class from “container-fluid ps-0” to “container-fluid px-0”

    3) Add this:

    (css/custom.css)

    @media (max-width: 991px) {
    	.body {
    		margin-top: 0 !important;
    	}
    
    	.notice-top-bar {
    		position: static !important;
    	}
    }

    4) It would require a little of extra work which is not included in our support but this page may help you to get started: https://www.okler.net/previews/porto/10.1.0/feature-page-headers-background-video.html

    Kind Regards.


    #10044331
    keydesignart
    Participant

    Item number 3 didn’t work, unfortunately.

    @media (max-width: 991px) {
    .body {
    margin-top: 0 !important;
    }

    .notice-top-bar {
    position: static !important;
    }
    }


    #10044332
    Support
    Keymaster
    This reply has been marked as private.
    #10044338
    keydesignart
    Participant

    Thank you it is done! 🙂


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

This topic is marked as "RESOLVED" and can not rceive new replies.