We have this problem where, we are building a div that contains a card header, and under it, it contains a div that is a list of items, now on PC and other phones it shows like this just fine:
However, on safari browsers, this card header is overlapped by the list:
It can be seen a bit, but barely.
We are not sure why this happens, and since we can't inspect element on neither an iPhone or an iPad (We assume it's a safari problem), and we don't have a mac either, we are not sure why this happens.
This is the html of this section:
<div class="tab-pane active" id="form_cliente_datos_historias_tab" role="tabpanel" style="flex-flow: column; flex: 1 1 auto; overflow-y: auto;">
<div class="list-group" style="padding-top: 0rem; margin-left: 0px; margin-right: 0px;" id="form_cliente_datos_historias_tab_a">
<form method="POST" id="form_cliente_datos_historias" role="form" class="is-readonly">
</form>
<div class="btn-group card-header justify-content-between">
<h5><span class="align-middle">Cuadros ClĂnicos</span></h5>
<div class="navbar-form"><button class="btn btn-primary btn-sm" id="btn_nuevo_cuadro_tab">
<i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
</div>
<div id="list_cuadros_tab">
</div>
</div>
<!--An example of a generated list from our DB -->
<div class="list-group" style="margin-left: 0px; margin-right: 0px;" id="form_cliente_datos_historias_tab_aa">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC801" data-id="801">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">testtesttesttestasdasdasd</h5>
<small class="text-muted">29/09/2019 18:23</small>
</div>
<p class="mb-1">123123123</p>
<small>123123</small><br>
</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC799" data-id="799"><div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">asasdasdasd123123123</h5>
<small class="text-muted">29/09/2019 18:13</small>
</div>
<p class="mb-1">asdasdasdasd</p>
<small>asdasdasdasd</small><br>
</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC796" data-id="796"><div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">awdawdawd</h5>
<small class="text-muted">29/09/2019 18:11</small>
</div>
<p class="mb-1">awdawdawd</p>
<small>awdawd</small><br>
</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC797" data-id="797"><div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">awdawdawd</h5>
<small class="text-muted">29/09/2019 18:11</small>
</div>
<p class="mb-1">awdawdawd</p>
<small>awdawd</small><br>
</a>
</div>
</div>
Fiddle: https://jsfiddle.net/Seyren/Lwakg8xd/
Hopefully i provided everything possible for this question, if there's anything else i can provide, please let me know
This is something really weird that i'm not sure how to fix, hopefully someone here knows why this might be
Thanks in advance!
Related
I have a card-group with several cards like this:
<div class="card-group">
<div class="justify-content-start p-3">
<div class="card bg-light text-center p-0" style="width: 10rem;">
<div class="card-header justify-content-right align-middle">
<span class="align-middle"><h3> {{ item[1] }} </h3></span>
</div>
<div class="card-body justify-content-center">
<img class="w-50 m-2" style="image-rendering: pixelated;" src="../static/icon.png">
<div class="input-group mt-3 w-100">
<button type="button" class="btn btn-outline-primary w-75" id="toggleButton">Water</button>
<button type="button" class="btn btn-outline-primary w-25" data-bs-toggle="collapse" data-bs-target="#timeCollapse" aria-expanded="false" aria-controls="collapseButton">
<i class="bi bi-three-dots-vertical"></i>
</button>
</div>
<div class="collapse mt-2" id="timeCollapse">
<input type="text" class="form-control" aria-label="Time Input Dropdown">
</div>
</div>
</div>
</div>
</div>
When Testing on Chrome, they work perfectly, stacking into multiple rows.
However when I turn on the mobile Layouts/Narrow the Viewport, the cards start to all go into individual rows.
I have tried narrowing the cards, to make sure they are not just too wide, but nothing seems to work.
What could cause this issue? Also is there a 'smart' width feature for cards, similar to css background-repeat: round;
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi đź‘‹, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I need to have my button occupy the whole width when the view is small such as viewing it on a mobile phone. This is what I have so far...
Large Device
Medium Device
Small Device
On medium to small device, I need to have the button take up the whole block. I am not using any custom css yet. I'm just using the bootstrap default. Please see my code below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" style="display:flex; align-items:inherit;">
<input type="text" class="form-control form-control-dark" placeholder="Username" aria-label="Username">
<input type="password" class="form-control form-control-dark" placeholder="Pasword" aria-label="Password">
<button type="submit" class="form-control btn btn-outline-light" style="margin-left: 1rem!important;">Login</button>
</form>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
#*
<div class="text-end d-sm-block gap-2">
<button type="button" class="btn btn-warning" style="width:100%; display:block;">
Sign-up
</button>
</div>*#
</div>
</div>
</header>
Try this.... The only change is adding d-grid gap-2 to the Div which houses your button. You may have to edit the number 2 to get your fully desired effect. With this you can probably remove the style= from your button too.
<div class="text-end d-grid gap-2">
<button type="button" class="btn btn-warning" style="width:100%; display:
block;">Sign-up</button>
</div>
I have a site in which the header image is not displaying correctly in mobile. I'm using bootstrap 4, so the site should be responsive. But when I load my site in mobile browser the header image repeats. I remove the no-repeate in css, but then the image covers half of the div, the other half is blank. The header works just fine in laptop, and desktop. is just mobile I'm having problem displaying.
here's the site JV Computers
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
learn more
get support
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration​.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
Back to top
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS code
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}
this should do it: background-size: cover;
I'm trying to align items in a div tag and I have tried a couple ways but failed to do so.
.
Basically this is what I have:
I tried using flex but when I align individual items to top, midlde or bottom, all 3 get aligned that way.
Is there a way I can do it using bootstrap only? and if not please help me with css. Thank you!
This is my code (the styles are in a separate file but I minimized it into the html code for this question):
<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
<div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
<div class="--I tried flex and different aligns--">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
<%=user_data.projects[i].category%>
</p>
<h6 class="font-weight-bold">
<%=user_data.projects[i].title%>
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
</div>
</div>
</div>
You can use the classes d-flex, flex-column and justify-content-around to solve this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div class="card card-image">
<div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
<div class="d-flex flex-column justify-content-around">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
1st item
</p>
<h6 class="font-weight-bold">
2nd item
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
<i class="fa fa-clone left"></i> View
</a>
</div>
</div>
</div>