I would try to make the image align with the border line. But I cannot figure out. (As the image below) And I am not sure why the well is not covering my content. Not sure what is the problem. Hope you can help.
Any help will be appreciated!
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
<div class="row">
<div class="well">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
I think this little correction does the work
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
and why are you using this css ?
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
I added some little changes as per your comment
add this to your css
<style>
.div-img-padLftZero{
padding-left:0px;
}
</style>
then make your code like this
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
Now it is left aligned as you desired
Related
In my Code, I have used CSS Flexbox to put multiple images in a single line. I have specified the image size in rem and not in % because when I use % , then after resizing the window, the number of images in a row remains the same and I don't want that. Instead I want that when the screen size is lesser than the image size then the image adjusts its size according to the screen size and only one image remains in each row.
The problem I am facing is that when I resize the window size to be lesser than the images size, then full image is not visible. I want the image to shrink accordingly.
html{
font-size:12px;
}
#heading{
font-size:1.5rem;
text-align:justify;
width:80%;
margin:auto;
word-spacing:0.5rem;
color:lightslategrey;
margin-top:2rem;
margin-bottom:3rem;
}
#gallery_header{
width:80%;
margin-left:auto;
margin-right:auto;
color:blue;
font-size:3rem;
text-align:center;
margin-bottom:2rem;
}
#gallery{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
width:80%;
margin:auto;
}
.img_container{
width:35rem;
height:30rem;
display:inline-block;
}
.img_container img{
width:35rem;
height:30rem;
display:inline-block;
}
main{
display:flex;
width:100%;
flex-direction:column;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
</head>
<body>
<div id="heading">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="gallery_header">
IMAGE GALLERY
</div>
<div id="gallery">
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following code to your CSS
#media (max-width: 767px){
.img_container{
height: 30rem;
display: inline-block;
width: 100%;
}
.img_container img{
width: 100%;
height: 30rem;
display: inline-block;
}
}
My code:
<div class="container">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<span class="open"><?php include 'opent-stengt.php'?></span>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info"><?php include 'status.php'?></p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Sist oppdatert:<?php include 'time.php'?></a></span>
</div>
</div>
I am trying to move the text down, maybe about 16% on desktop. i also want it to look gott on mobile etc. How can I do this? this is my codepen: https://codepen.io/andve04/pen/MWwJbpb
There is also a bug were the "open" covers the "status" chen minimizing the window? How can i fix this.
Any help is greatly appresicated!
Kindly look at below code and link if it's your expected requirement:
<div class="container w3-animate-bottom">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
</div>
<div class="row">
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<div class="open">OPEN</div>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Last updated:<?php include 'time.php'?></a></span>
</div>
</div>
URL: https://codepen.io/andve04/pen/MWwJbpb
You should use media-queries, to make the text smaller. Here is an example of all needed media-queries.
/**
* XL
* ---------------------------------------------------------------- */
#media (min-width: 1200px) {
}
/**
* LG
* ---------------------------------------------------------------- */
#media (min-width: 992px) and (max-width: 1199px) {
.open {
font-size: 80px;
}
}
/**
* MD
* ---------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
}
/**
* SM
* ---------------------------------------------------------------- */
#media (min-width: 576px) and (max-width: 767px) {
.open {
font-size: 80px;
}
}
/**
* XS
* ---------------------------------------------------------------- */
#media (max-width: 575px) {
}
You can move the Text down with something like:
.container {
margin-top: 16vh;
}
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
I've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
Why I am I not being able to apply padding-top and margin-top in my html file? Can Someone please help me with what i may be doing wrong? The following are the main tags:
body{
background-color: #1e2a32;
margin:0 auto;}
#pagewrap{
width:1250px;
height:auto;
margin:auto;
}
Have added the html mark up:
<!doctype html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" class="csstransforms csstransforms3d csstransitions"><head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cure Sight Laser Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap"> <!--pagewrap start-->
<!--header start-->
<div id="header">
<div class="top">
<span style="margin-left:50px;">
<img src="images/phone.png">
<span class="text1">+00 000 000 00 </span>
<img src="images/mail.png">
<span class="text1">info#curesightindia.com</span>
<contact>Contact Us </contact>
</span>
<span style="margin-left:450px; margin-top:30px;">
<img src="images/twitter.png">
<span style="padding-left:4px;"><img src="images/facebook.png"></span>
<span style="padding-left:4px;"><img src="images/googleplus.png"></span>
<span style="padding-left:4px;"><img src="images/linkedin.png"></span>
<span style="padding-left:4px;"><img src="images/quora.png"></span>
</span>
<!-- search form -->
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button">
</div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform"
action="#">
<div class="search-text">
<input type="text"
value="Search..." name="s" id="s" autocomplete="off" data-default="Search...">
</div>
<input type="submit"
id="searchsubmit" value="Go!">
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div><!--top end-->
<div class="logo"><br>
<span style="margin-left:30px;"><img src="images/logo.png"></span> </div><!--logo
end-->
<div class="navigation">
<br>
<!-- Navigation -->
</div><!--navigation end-->
<div class="bottom">
</div><!--bottom end-->
</div> <!--header end-->
<div id="slider">
</div><!--slider ends-->
<div class="primary">
<div class="primary_box1">
<span class="text2" style="padding-left:50px; padding-top:0px;">Why Choose Us</span>
<br>
<div class="text3";>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box1 end-->
<div class="primary_box2">
<span class="text2" style="padding-left:50px;">Dr. Parimal Desai</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box2 end-->
<div class="primary_box3">
<span class="text2" style="padding-left:50px;">Myths About lasik</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box3 end-->
</div><!--primary end-->
<div class="secondary">
<div class="side-left">
<div class="side-left_top"> <span class="text5"> Video </span> <a href="#"> <img
src="images/view-all-btn.png" width="57" height="13"></a></div>
<span style="margin-right:30px;"> </span>
</div><!--side-left end-->
<div class="side-right">
<div class="side-right_top"> <span class="text5">Testimonials </span><a href="#">
<span style="margin-left:5%; margin-top:3px;"><img src="images/view-all-btn.png"
width="57" height="13"></span></a>
</div>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident. </p>
<br>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident.</p>
</div><!--side-right end-->
</div><!--secondary end-->
</div><!--content end-->
<!--footer start-->
<div id="footer">
<br><br>
<span class="text4" style="padding-top:50px; padding-left:480px;">Copyright 2013
by Cure Sight Laser Centre. All Right Reserved.</span>
<span style="margin:0px 0 0 50px"></span> <a href="#top">
<img src="images/to-the-top.png" width="67" height="13"></a>
</div><!--footer end-->
</div><!--pagewrap end-->
</body>
</html>
Is it happening beacuse i've added the percentage value?
`
Try something like this instead:
You have too much html to give you an accurate answer --- Please provide CSS to give you a better answer.
See here: http://jsfiddle.net/aLSXn/3/
HTML:
<div id="container">
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>
<li class="main-nav-link">Nav1</li>
<li class="main-nav-link">Nav2</li>
<li class="main-nav-link">Nav3</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body {
width:100%;
background:lightgray;
}
#container {
width:100%;
}
#main-header {
display:block;
}
#logo {
position:absolute;
top:0;
left:0;
}
#main-nav {
display:block;
background:gray;
margin:5em 6em;
}
#main-nav ul {
list-style:none;
}
#main-nav .main-nav-link {
display:inline-block;
}
#main-nav .main-nav-link a {
display:inline-block;
padding:0.8em 1em;
text-decoration:none;
color:white;
font:bold 1em arial;
}
See here: http://jsfiddle.net/aLSXn/3/