i am newbie to web development and i am working on materialize cards.It is working correctly in laptop but when i try to run it in iPad the cards are getting overlap.
.container-fluid {
margin-top: 500px;
/*
padding-left: 100px;
padding-right: 100px;
*/
}
.card-reveal {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.7) !important;
}
div.card-reveal span.card-title {
color: #ffffff !important;
}
.card {
width: 280px;
height: 360px;
z-index: 5 background-color: blue;
}
#card-img {
height: 200px;
}
.card-content {
margin-top: -17px;
color: black;
}
.card-action {
margin-top: 38px;
}
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/stackcss.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col m3">
<div class="card hover-reveal sticky-action z-depth-2">
<div class="card-image waves-effect waves-block waves-light">
<img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
</div>
<div id="thumbnail" class="z-depth-5"></div>
<div class="card-content">
<p>Card Title<i class="material-icons right">more_vert</i></p>
<!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
</div>
<div class="card-action">
VIEW
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col m3">
<div class="card hover-reveal sticky-action z-depth-2">
<div class="card-image waves-effect waves-block waves-light">
<img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
</div>
<div id="thumbnail" class="z-depth-5"></div>
<div class="card-content">
<p>Card Title<i class="material-icons right">more_vert</i></p>
<!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
</div>
<div class="card-action">
VIEW
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/matjs.js"></script>
</body>
</html>
You are trying to have four cards in a line, each of the cards is 280px wide, and that makes it 1120px of total width. In addition, you have 50px of left and right margins (.container-fluid), which will add a 100px to the total width. Eventually you are going to have some space between those cards, so add another hundred. 1320px of total width for this section is a minimum that will allow you to have four of these cards in a line. According to the Materialize documentation the .m3 class that you’ve assigned to your cards will keep all these cards in a .row in a single line up until your screen resolution greater than 600px wide, otherwise all cards will be rearranged to fill multiple lines.
Basic on what materialize is offering you can change .m3 classes to .xl3 and thereby buy another 600px. But your 1320px section is still be wider than 1200px for .xl class, so you may consider to reduce .container-fluid’s left and right margins and/or reduce card’s width.
Related
So when looking at the Bulma documentation (https://bulma.io/documentation/components/modal/), I am using the modals for both desktop and mobile but I'm having some formatting issues.
On Bulma, the mobile view doesn't add any spacing on the sides as below:
Does anyone know a native way to add spacing on modals for Bulma? I used px-4 which works great, but it adds the padding on desktop also, but I have the following modal structure:
<div id="mobile-profile-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card px-4">
<header class="modal-card-head">
<p class="modal-card-title"><?= $user->get_first_name(); ?></p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="container">
<div class="columns is-centered">
<div class="column">
<button class="button is-fullwidth">Profile</button>
<button class="button is-fullwidth">Settings</button>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-fullwidth is-primary">
<span class="icon">
<i class="fas fa-sign-out-alt"></i>
</span>
<span>Logout</span>
</button>
</footer>
</div>
</div>
If you don't mind overriding the linked Bulma CSS style sheet, you can do something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Modal Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<style type=text/css>
.modal-card,
.modal-content {
margin: 0 20px;
max-height: calc(100vh - 160px);
overflow: auto;
position: relative;
/*remove width: 100%;*/
width: calc(100% - 2em);
}
/*modal breakpoint*/
#media screen and (min-width:769px) {
.modal-card,
.modal-content {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 640px
}
}
</style>
How do I push down the left-most column a position-fixed according to navbar height which has fixed-top???
Here is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html,
body {
height: 100%!important;
}
.navbar-brand img {
filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
}
</style>
<style>
.scrollable {
overflow: hidden;
height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
}
.scrollable:hover {
overflow: auto;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
background-color: #FEFEFE;
}
::-webkit-scrollbar-thumb {
background-color: #6c757d;
}
</style>
<title>BS5 Layout</title>
</head>
<body class="bg-light">
<header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
<div class="col-12 col-md-3 col-lg-2">
<a class="navbar-brand text-primary px-2" href="#">
<img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
Brand
</a>
</div>
<nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
<ol class="breadcrumb mt-3 px-2">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Contacts</li>
<li class="breadcrumb-item active" aria-current="page">List</li>
</ol>
</nav>
</header>
<div class="container-fluid h-100">
<div class="row h-100">
<section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
This won't scroll all the way to bottom?!?
item<br>
...
Last item
</section>
<section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
Repeat this content and navbar disappears after X number of scrolls<br>
...
Last line<br>
</section>
<section class="h-100 col-md-4 col-lg-3 p-0 border-start">
SIDE
</section>
</div>
</div>
</body>
</html>
Thanks in advance :)
Body padding is required as your nav is fixed!
The fixed navbar will overlay your other content unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Include this line after the bootstrap stuff! Working demo and code!
I am a bit new to bootstrap and would like some guidance regarding how to use "d-flex" to align the content center. I tried applying "d-flex justify-content-center" like what the documentation says but the alignments still does not work. Is there anything I am doing wrong? I attached an image below; looking for centered spacing after the "Testing!" so the pictures are more aligned in the center from top to bottom. I believe I got the horizontal alignment correct.
<div class="container">
<div class="row ">
<div class="col text-center">
<h1>Testing!</h1>
</div>
</div>
<div class="row body text-center">
<div class="col-6">
<h2>Shop Collections</h2>
<img class="img-fluid"src="images/rx782alloy.jpg" >
</div>
<div class="col-6">
<h2>Catalog</h2>
<img class="img-fluid" src="images/batmanbeyond.jpg" >
</div>
</div>
</div>
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/xz54x.png
Please check out this fiddle. I believe this will answer your question. I have given you a guideline that will clarify your concept regarding d-flex. The design is responsive, change the view to see the result.
https://jsfiddle.net/hilalrehan/9vyd6Lu2/140/
.adjust {
padding-top: 30px;
position: relative;
}
.text-area{
min-height: 139px;
}
.box {
padding: 0.2rem;
flex: 0 0 20rem;
}
.set{
flex-flow: wrap;
justify-content: center;
min-width: 20rem;
}
#media (min-width: 576px) {
.set {
max-width: none;
}
.box {
padding: 0rem;
}
}
#media (min-width: 1200px) {
.set {
justify-content: flex-end;
}
.box {
flex: 0 0 8rem;
}
}
<html>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-6 col-xl-6">
<h2 class="display-2"> Testing </h2>
<div class="d-flex set mx-auto ">
<div class="box">
<div class="text-area display-4 text-center text-white bg-success"> Shop Collections </div>
<div class="img bg-success"> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid"> </div>
</div>
<div class="box">
<div class="text-area display-4 text-center adjust-text black bg-warning"> <div class="adjust"> Catalog</div> </div>
<div class="img bg-white "> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid" > </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
I'm working with Bootstrap 4 and I've been searching for a solution to my ordering issue, but can't seem to get it right or find one in the archives. Here's the situation...
On a desktop, I need the following layout:
Then on a mobile device, the layout should look like:
Box 1 is given a class of "col-md-8", and Box 2 is given the class "col-md-4". But for the life of me, I can't figure out how to properly place Box 3 (or the proper class) to get it to appear correctly in both layouts. Anyone have any thoughts?
I appreciate the help in advance!
EDIT (2018/6/26):
Here's the resulting code that works:
<main id="body" role="maincontent">
<div class="container">
<h1>Page Title</h1>
<div class="row d-flex d-md-block clearfix">
<div class="col-md-8 main_content float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 highlight float-right">
<p>Second Item</p>
</div>
<div class="col-md-4 float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</main>
This has already been answered in similar questions such as: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Since BS4 uses flexbox, disable the flexbox using d-md-block, and use float- to make the 2nd column pull right on md screens...
<div class="container">
<div class="row d-flex d-md-block">
<div class="col-md-8 float-left">
1
</div>
<div class="col-md-4 float-right">
2
</div>
<div class="col-md-8">
3
</div>
</div>
</div>
https://www.codeply.com/go/4HZq18NKln
For mobile devices try using media queries and grid classes small. For instance, box1 col-sm-4 you can reference this guide https://getbootstrap.com/docs/4.0/layout/grid/
`something {
padding: 5px;
#include media-breakpoint-up(sm) {
padding: 20px;
}
#include media-breakpoint-up(md) {
padding: 40px;
}
For ordering, you can use ordering property and here is the mdn ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
You can reference this post Using media breakpoints in Bootstrap 4-alpha
Hope that will help you.
Assume phone screen width is 425px based on Google Chrome. Copy and paste the code and open in your browser to see the actual result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
h1 {
color: #fff;
}
.left, .right {
height: 800px;
}
.one {
height: 500px;
background-color: red;
}
.two {
height: 100%;
background-color: green;
}
.three {
margin-top: 0.5em;
height: 275px;
background-color: blue;
}
#media screen and (max-width: 425px) {
.two {
width: 50%;
position: absolute;
left: 25%;
top: -285px;
}
.three {
margin-top: 51em;
}
}
</style>
</head>
<body>
<div class="row p-0 m-0">
<div class="left col-md-8 col-sm-12 p-2">
<div class="row p-0 m-0">
<div class="one col-12"><h1>One</h1></div>
<div class="three col-12"><h1>Three</h1></div>
</div>
</div>
<div class="right col-md-4 col-sm-12 p-2">
<div class="two"><h1>Two</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
<script>
</script>
</body>
</html>
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}