About Visual Problems

[keydesignart]

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?

---

[Support]

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.

---

[keydesignart]

Item number 3 didn’t work, unfortunately.

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

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

---

[Support]

This reply has been marked as private.

[keydesignart]

Thank you it is done! 🙂

---

[Author]

Posts