nihongoshark pro asked 7 years ago


I'm working on creating a homepage and instead of having a full screen image background I only want it to take up about 70% of the screen.For example, imagine this:https://mdbootstrap.com/previews/docs/latest/html/intros/intro-minimalistic.htmlbut instead of being fullscreen it's just 50-70% and you can see the next section below it. Does that make sense?I've gotten it to work on desktop but every time I load my page on mobile it's always fullscreen. Any tips for getting it to work would be awesome!Thanks.

Marta Wierzbicka staff answered 7 years ago


Hi,

Change this CSS code:

.intro-1 {
height: 1050px;
}
@media (min-width: 770px) and (max-width: 1025px) {
.intro-1 {
height: 750px;
}
}
@media (max-width: 740px) {
.intro {
height: 600px;
}
}

to this:

.jarallax {
min-height: 50vh;
}

Best,
Marta


nihongoshark pro commented 7 years ago

Thanks! That worked. I see how I made a mistake.

Marta Wierzbicka staff commented 7 years ago

You're welcome.

Marta Wierzbicka staff answered 7 years ago


Hi, could you paste here any demo with your solution for a desktop? I'll help you with a mobile version. Best, Marta

nihongoshark pro commented 7 years ago

Sure thing. This link should work: http://64.187.163.117:8078/ If not, I can copy-paste the source html. It's just a homepage at the moment. As you'll notice, when the window is in fullscreen you can see the text while also seeing the banner image. However on a mobile phone it maintains full screen. And I can't see the text without scrolling down. I've tried changing the way the image displays with media queries but haven't had any luck so far. Any help would be awesome. Thanks.

Marta Wierzbicka staff commented 7 years ago

Could you send me HTML file to m.szymanska@mdbootstrap.com because this link above doesn't work.

nihongoshark pro commented 7 years ago

Sure, no problem.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags