Half Page Intro

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Half Page Intro

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 Szymanska staff pro premium 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 Szymanska staff pro premium 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.

Marta Szymanska staff pro premium 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 Szymanska staff pro premium commented 7 years ago

You're welcome.
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
nihongoshark
Pro User
0Support score
2Questions 0Answers
0Snippets likes 0Snippets