I am building a website for someone and somehow I can't manage to make the image in the header stay where it's supposed to. I am using the #mobile to determine the screen width, but it works only on my computer's screen. When I move to another computer, it's always to the left or to the bottom.
Code:
#media (min-width: 1203px) {
#profile {
position: relative;
margin-top: -35.5%;
margin-left: -31%;
float: left;
padding-left: 12%
}
#mishpat {
padding-top: 150px;
}
}
#media (max-width: 1203px) {
#profile {
position: relative;
margin-top: -40.4%;
margin-left: -35%;
padding-left: 16%;
padding-top: 6%;
float: left;
}
#mishpat {
padding-top: 150px;
}
}
#media (max-width: 1025px) {
#profile {
position: relative;
margin-top: 3.5%;
margin-left: 10%;
padding-left: 16%;
padding-top: 0px;
float: left;
}
#mishpat {
padding-top: 150px;
padding-left: 0px;
}
}
#media (max-width: 991px) {
#profile {
position: relative;
margin-top: 1%;
margin-left: 8%;
float: left;
bottom: 46px;
margin-bottom: -150px;
}
}
#media (max-width: 767px) {
#profile {
position: relative;
margin-top: 2%;
margin-left: -15%;
float: left;
bottom: 46.5px;
}
}
#media (max-width: 470px) {
#profile {
position: relative;
margin-top: 18%;
margin-left: -8%;
float: left;
max-width: 100%;
padding-top: 25%;
}
}
<header class="masthead text-center text-white d-flex">
<div class="layer">
</div>
<div class="container my-auto">
<div class="row">
<div id="mishpat" class="col-lg-10 mx-auto">
<h1 class="text-uppercase">
<strong>ד"ר מריאנה ירון</strong>
</h1>
<hr>
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5">מומחית ברפואה פנימית ואנדוקרינולוגיה</p>
</div>
<div class="col-lg-10 mx-auto">
<img id="profile" src="C:\Users\alonbarel336\source\repos\WebSite1\yaron 2\img\portfolio\thumbnails\3.jpg" class="img-responsive" width="520" height="700">
</div>
</div>
</div>
</header>
And here is an image to show how it looks like:
How can I make it stop before it crosses the blue line (flow to the next row)?
the new look after fixing with bootstrap 4
To make the image responsive do this:
Replace img-responsive with img-fluid. (there's no img-responsive in Bootstrap 4)
Remove width="520" height="700".
Related
So my problem is that the parent has some width and if the screen cant fit everything the children (floated left) go one under the other (looks awesome as well) so I want them when they go one under the other to be centered in the parent.
Here is my code. I tried inline-block and it didn't help and so on
.mainpage-articles {
float:left;
width: 60%;
}
.mainpage-article {
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
You're probably wanting to learn media queries, to respond to the user's screen. Am I right? If it's that, take a look here: https://codepen.io/giovannipds/pen/BwqyLW
This is what you want to learn:
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
This code align text things to the center when the user window's is at max 1500px, above that it doesn't. There are many ways to apply media queries. I recommend you to watch this to learn it a little better.
Full code of the example above:
<style>
.mainpage-articles {
background-color: #eee;
float: left;
width: 60%;
}
.mainpage-article {
background-color: cyan;
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
background-color: yellow;
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
background-color: #ccc;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
</style>
<div class="mainpage-articles">
<div class="mainpage-article">
<div class="thumbnail">
<img src="//lorempixel.com/400/200" alt="">
</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet.</p>
</div>
</div>
</div>
There's an example here with Bootstrap 4 too:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.parent {
background-color: yellow;
}
.smth-else {
background-color: cyan;
}
.children {
margin: 75px !important;
}
.children [class^=col-] {
border: 1px solid red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="parent col">
<div class="children row">
<div class="col-lg-6">
Children col 1
</div>
<div class="col-lg-6">
Children col 2
</div>
</div>
</div>
<div class="smth-else col">
Smth else
</div>
</div>
</div>
Your code is not so pretty, you should adapt them to use media queries better.
How to achieve displaying this layout with flexbox using Bootstrap 4 (so I can strech the decoration div and menu div on desktops?)
I was using Bootstrap 3 but now I'm using Bootstrap 4 this is what I have this so far:
https://codepen.io/anon/pen/RLMKxZ
<div class="container-fluid"
style="padding: 0; background-color: #001143; color: white;">
<div class="row align-items-start">
<div class="col-xs-12 col-sm-1 evento float-left"></div>
<div id="triangulo_div" class="triangulo_div float-left">
<p class="triangulo_rectangulo">triangulo rectangulo.</p>
</div>
<div class="col-xs-12 col-sm-3 float-left menu"
style="background-color: #06184A;">
<div class="menu_subdiv"></div>
<div class="menu_subdivcont">
<div style="text-align: left; vertical-align: middle;">
<div class="menu_link">
<a class="imghover" href=".php"><img
data-alt-src="../img/contacto2.png" src="../img/contacto.png">
1. Menu</a>
</div>
<div class="menu_link" style="background-color: #4FCCE8">
<a class="imghover" href="#"><img data-alt-src="../img/hotel.png"
src="../img/hotel2.png">2. Menu</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 float-left menu_siguiente"
style="background-color: #06184A;">
<div style="text-align: left; vertical-align: middle;">
<div class="menu_link">
<a class="imghover" href="seleccionar_detalles.php"><img
data-alt-src="../img/habitaciones2.png"
src="../img/habitaciones.png"> 3. Menu</a>
</div>
<div class="menu_link">
<a class="imghover" href=".php"><img
data-alt-src="../img/resumen2.png" src="../img/resumen.png"> 4.
Menu</a>
</div>
</div>
<div class="menu_siguiente_subdiv"></div>
</div>
<div class="col-sm-3 col-lg-5 float-md-right">
</div>
<div id="contenido"
class="col-xs-24 col-sm-7 float-right contenido bck_div2">
<div id="error">
</div>
<div class="formulario" style="min-height: 20em">
<h1>Content</h1>
</div>
</div>
</div>
</div>
Css:
.rwd-line {
display: none;
}
.evento {
display: block;
min-height: 7em;
background-image: url('img/imagen_horizontal.png');
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: 40%;
background-size: 40%;
clear: both;
z-index: 5;
}
.atencion_cliente {
background-color: #001143;
}
.triangulo_div {
display: none;
}
.menu_link {
width: 100vw;
text-indent: 2.6em;
}
#media screen and (min-width: 576px) {
.rwd-line {
display: inline;
}
.menu_link {
width: 100%;
}
.contenido {
top: 6em;
background-color: rgba(79, 204, 232, .9);
}
.triangulo_div {
display: inline-block;
position: relative;
z-index: 5;
pointer-events: none;
padding: 0;
width: 0;
}
.triangulo_rectangulo {
width: 0;
height: 0;
text-indent: -9999px;
border-top: calc(100vh - 75px) solid white;
border-right: 4.8em solid transparent;
}
.menu_siguiente {
float: left;
}
.menu {
float: left;
padding-right: 0;
}
.menu_subdiv {
height: 6em;
vertical-align: top;
}
.menu_subdivcont {
vertical-align: bottom;
}
.menu_siguiente_subdiv {
height: calc(100vh - 268px);
float: left;
padding-right: 0;
}
.evento {
display: block;
height: calc(100vh - 75px);
background-image: url('img/imagen_vertical.png');
background-position: center;
background-position-y: 5em;
background-repeat: no-repeat;
-webkit-background-size: 60%;
background-size: 60%;
}
.container {
position: relative;
margin-bottom: 0;
padding-bottom: 0;
}
}
#media screen and (max-width: 767px) {
.menu, .menu_siguiente {
padding-left: 0;
}
}
#media screen and (min-width: 1500px) {
.imghover {
padding-left: 4em;
}
}
#media screen and (min-width: 1800px) {
.imghover {
padding-left: 6em;
}
}
.menu, .menu_siguiente a, a:hover {
color: white;
}
body, html {
height: 100% !important;
padding: 0;
margin: 0;
background-color: #001143;
}
input, select {
font-size: .9em !important;
}
.evento {
background-color: white;
}
I've tried other ways, like without flexbox succesfully but I wouldn't be able to stretch the divs
Update: here's the code for what I've also tried but it won't stretch the Decoration and Menu divs if Content div is higher and there's a blank space at the end of the page
I also updated the other example as I forgot to include a first div with Logo
https://codepen.io/anon/pen/jGzdwm
I'm trying to put a form on a div where I have an image:Form on the image
The problem is that I cannot float the form to the right side and also the form is under the other divs just as the image I've also attached here:
Form under other divs
.slider__size {
overflow: hidden;
height: 570px;
position: relative;
font-family: "DINNextLTProLight";
}
.slider__img__position {
justify-content:center;
align-items:center;
display: flex;
position: absolute;
}
.slider__consolidado__img__position {
justify-content:center;
align-items:right;
display: flex;
position: absolute;
}
.img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
height: auto;
margin: auto;
position: relative;
}
.title__box {
padding-top:200px;
position: absolute;
padding-left: 50px;
}
.h1__home span{
color: white;
font-size: 50px;
letter-spacing: 1px;
font-weight: bolder;
}
#media (min-width: 600px) and (max-width: 992px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 150%;
height: auto;
position: relative;
margin: auto;
}
}
#media (min-width: 400px) and (max-width: 600px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 250%;
}
}
#media (max-width: 400px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 300%;
height: auto;
position: relative;
margin: auto;
}
#media (max-width: 300px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 400%;
}
}
}
#media (min-width: 768px) {
.navbar-fixed-bottom { display: none;}
}
#media (min-width:768px){
.form__consolidado__color {
margin-top: 120px;
position: absolute;
margin-left: 20px;
box-shadow: 0 0 6px 0px black;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 slider__size">
<div class="slider__consolidado__img__position">
<img class="img-responsive img__blend__filter" src="/slider_notebook.jpeg"
alt="Crédito Família">
</div>
<div class="title__box">
<h1 class="h1__home"><span>Comece<br>a realizar<br>sonhos</span</h1>
<button class="btn-default btn-padding btn__slider__color_orange">
Saiba mais
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 form__consolidado__color">
<h2 class="form__title">Lorem Ipsum</h2>
<h3 class="form__subtitle">What's Lorem Ipsum</h3>
<form data-toggle="validator" role="form" name="contato" action="" method="POST">
<div class="form-group row">..... </div>
<div class="row">
<div class="col-sm-12 div__info__color">
<h2 class="text__blue__h2">.....</h2>
<p class="text__grey__14">......</p>
</div>
The problem of the form being under other divs can be solved by setting the "z-index" property of the div containing the form to a high value which will make the form appear on the first level
z-index: 100
.col-xs-12.col-sm-6.form__consolidado__color {
float: right;
}
I solved the float problem with margin-left:45%;
I'm new at the Bootstrap. Before I was writing a grid by myself, but now, I thougt, that I should learn new thing.
I'm making a basic site with background image in one of the containers. I don't know why, I have an extra padding added. I was trying with background-size: contain and cover, but it is not the effect that I want.
And I need that padding-bottom to stretch the container. The mathematical operation is the height of the image split with with and multiply with percetage. In my own grid it was working like a fairy tale.
Now I'm missing something. Any ideas?
This is jsfiddle: https://jsfiddle.net/LukMona/qwqck9bp/2/
CSS:
.bg-img {
width: 100%;
background-image: url("https://github.com/LukMona/Doctors_Search_Basic/blob/master/images/header_background.jpg?raw=true");
background-repeat: no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
padding-bottom: (1210/2808)*100%;
}
.main-top-header {
position: absolute;
width: 90%;
margin-top: 2%;
margin-left: 5%;
margin-right: 5%;
}
.main-top-header-left {
float: left;
position: relative;
width: 25%;
margin: 0;
}
.logo {
margin: 0;
}
h1 {
font-size: 2.5rem;
margin: 0;
}
.main-top-header-right {
position: relative;
float: right;
width: 75%;
}
ul {
text-align: right;
}
li {
display: inline-block;
margin-left: 5%;
font-size: 2rem;
}
a:link {
color: inherit;
text-decoration: none;
}
a:hover {
color: blue;
}
.main-search {
background-color: grey;
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin: 0 auto;
padding-top: 2%;
padding-bottom: 5%;
border-radius: 3%;
position: relative;
;
top: 10rem;
}
.searching {
width: 50%;
margin: 0 auto;
}
.find {
width: 80%;
background-color: grey;
}
span:first-child {
padding: 2%;
margin-bottom: 2%;
}
.search {
float: left;
}
input {
height: 3rem;
width: 75%;
padding-left: 2%;
}
button {
width: 20%;
height: 3rem;
background-color: blue;
color: white;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
}
nav {
background-color: grey;
height: 200px;
}
HTML:
<header class="container-fluid bg-img">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 main-header">
<!-- TOP HEADER -->
<div class="main-top-header">
<div class="main-top-header-left">
<div class="logo">
<h1>
Logo
</h1>
</div>
</div>
<div class="main-top-header-right">
<div class="menu">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP HEADER -->
<div class="main-search">
<div class="searching">
<span>type something</span>
<br>
<input class="search" type="text" name="search" placeholder="typing">
<button class="search">
<span>find</span>
</button>
</div>
</div>
</div>
</div>
</header>
<nav class="row">
<div>
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
</div>
</div>
</nav>
Remove .main-top-header { position: absolute; } and .main-top-header-left { position: relative; } that will work
I've tried to center the items of my masonry layout, but it still always floats left and has lots of white space at certain browser widths. Also how could I get more padding on the bottom of the container between the hr element? Here's the website page link: http://www.gabrielleelizabethstudios.com/gallery_template.html
HTML:
<div class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item", isFitWidth: true}'>
<div class="item">
<a class="group1" href="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg" title="justin merriman 2014"><img width="167" height="250" src="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg"/></a>
</div>
<div class="item w2">
<a class="group1"...
CSS:
.item img{
border-radius: 10px;
}
.masonry{
width: 85%;
max-width: 1000px;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 35px;
}
.masonry .item{
margin-bottom: 20px;
margin-top: 20px;
height: 250px;
float: left;
margin: 10px;
}
.item { width: 167px; }
.item.w2 { width: 375px; }
#media only screen and (max-width: 720px),
only screen and (max-device-width: 720px){
.masonry{width: 95%;}
}