I am using Bootstrap3 for my responsive page design here. I am adding a box inside the banner content with some text inside it as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<section id="slider">
<ul class="rslides" id="modest-slider">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
</div>
<div class="slider-caption container">
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ui>
</section>
It is working fine in full screen. When I am resizing the browser the alignment is not working correctly. The box with content is not fit with the page. Any help will be appreciated!!
Try the solution with minor changes
Demo http://www.bootply.com/p6wIuR17QB
/* CSS used here will be applied after bootstrap.css */
#modest-slider {
position: relative;
}
.slider-caption {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="slider">
<ul class="rslides list-unstyled" id="modest-slider" stye="position:relative;">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/600x300&text=slider1" alt="slider1" class="img-responsive">
</div>
<div class="slider-caption container">
<div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ul>
</section>
Try this:
<div class="row" >
<!-- changing width to 100% with 600px maximum -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
This will not make the height change though, for that try:
change "height:130px;" to "height: 100%; max-height: 130px;"
You really need to read more about how Bootstrap works though as this is not a good way to use it
First, you should not assign width to your div, in case you are using bootstrap.
<div class="col-md-7" style="...width: 600px...
Using class col-md-7 assign a particular width to your section, which is in %, so that when you resize your browser, the div resizes accordingly.
But, you overwrote the width with 600px, which is a fixed width and does not flex with browser resize.
Related
I must create a section with two half divs with the same height, but the first must inside the container and other outside, like that sketch:
I have searched other solutions but I couldn't get them to work, like flex:1, align-stretch, probably because of the way I did it. Maybe you can fresh my mind, by suggesting another way.
Here is my code:
.bg-cyan {
background-color: cyan;
}
img {
max-width: 100%;
}
.right-half {
right: 0;
left: 50%;
border: 2px solid purple;
}
.container {
border: 2px solid red;
}
.col-6 {
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<section class="position-relative bg-cyan">
<div class="container position-static p-0">
<div class="row align-items-stretch">
<div class="col-6">
<h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
<h3>Staying inside the container</h3>
<ul>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
</ul>
</div>
<div class="col-6 position-absolute right-half p-0">
This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
<img src="https://picsum.photos/956/870">
</div>
</div>
</div>
</section>
I think you don't have to make the right side to absolute, just use the flexbox feature itself. Try this:
.bg-cyan {
background-color: cyan;
}
img {
max-width: 100%;
}
.right-half {
right: 0;
left: 50%;
border: 2px solid purple;
}
.container {
display: 'flex';
border: 2px solid red;
flex-direction: 'row';
}
.col-6 {
flex: 1;
align-self: 'auto';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<section class="position-relative bg-cyan">
<div class="container position-static p-0">
<div class="row align-items-stretch">
<div class="col-6">
<h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
<h3>Staying inside the container</h3>
<ul>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
</ul>
</div>
<div class="col-6 p-0">
This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
<img src="https://picsum.photos/956/870">
</div>
</div>
</div>
</section>
I try to make a web page that uses a fixed navbar and a list containing some sticky elements and an svg.
It works ok on my desktop in Firefox but is acting weird on my phone in Fennec (Firefox shows the same behavior while using the Responsive Design Tool (Ctrl + Shift + M)).
On scrolling down the fixed navbar and the sticky header scroll out of view and while scrolling up again the navbar and the header suddenly come into view again and stick to the top until the page is scrolled completely to the top.
When I remove the svg the desktop and the mobile browser show no difference regarding the stickiness.
What's wrong with the svg?Any idea how to fix that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body style="padding-top: 4.5rem;">
<nav style="position: fixed; top:0; height: 4.5rem; width:100%; background-color: #fa78;">
Status
</nav>
<main>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 1
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 2
</div>
</div>
<div>
<svg width="590" height="250"></svg>
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 3
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
</main>
</body>
</html>
File to test with svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithsvg.html
File to test without svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithoutsvg.html
(files expire on 2020-03-30)
Some css changes should work -
CSS
html{
height: 100%;
overflow: hidden;
}
body{
position: relative;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
For the below image I need to always show the whole background image regardless of the desktop window size and always ensure that the text layout remains the same, ie, the button is always sitting at the bottom of the section and not have a big blue gap below it.
*Note my image is just an example, the white rectangle is really a picture of a product but I have removed it because I cannot release such photos.
How best can I achieve this? This modern web design of maintaining the same look across different desktop browser screens is really troubling me because the methods I have used mean the design is not consistent across different browser screens, ie, the white rectangle gets clipped at the bottom or the text content height is too small for the blue section height and we get a big blue gap below it.
My techniques I have tried:
Use a bootstrap 3.3 row (the website uses this version of the library no choice in this) with 2 columns with the dimensions 3/12 and 9/12. This works but sometimes I get a big blue gap under the text content (button) when I would really like it to spread out vertically evenly.
Make the section have a CSS background image. Set the image to 'cover'. This results in clipping of the bottom of the white rectangle in certain desktop window dimensions.
Any advice on how best to approach this design using CSS3, Bootstrap 3.3 or etc.?
.blue-section {
background-color: #1caaf2;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section p {
color: #fff;
}
.blue-bk {
background: url('https://i.stack.imgur.com/Sgm8G.png') !important;
-webkit-background-size: contain !important;
-moz-background-size: contain !important;
-o-background-size: contain !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
width: 100%;
}
.banner-img {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<section class="section-container blue-section">
<div class="container">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive banner-img" src="https://i.stack.imgur.com/Sgm8G.png" />
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-container blue-section blue-bk">
<div class="container">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
All images:
White rectangle only (in production will be an image of a product):
Background image I use:
I have this layout: https://postimg.org/image/74ioib3y7/
The rules of the game are:
The container must be at least 210px wide and 85px high
Row1 should be able to grow as wide as it needs to and wrap words only when the container is as big as its container
Row2 has to be as wide as Row1 => it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1
I have managed to do everything except 3.
EDIT: JSFiddle
IGNORe THIS MUST HAVE IT TO PASTE JSFiddle
Please help
This should solve your request:
.container {
display: inline-block;
background: aliceblue;
min-width: 210px;
min-height: 85px;
position: relative;
}
.maxim {
position: absolute;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>description and more text is here also possible</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
I'm trying to design the following block, given in image
The background image of building is separate from the human image, how can I use bootstrap grid system to align the images and text in this way, also keep the aspect ratio of images?
The background image is spread to 100% but the the content and human image is centered and aligned with other content
Use the building image as background for your body tag and the human image as an background for either .container or .row class.
Also the human image should be aligned right.
Something like
body {
/* image just for reference*/
background: url('http://www.eliteconcreterestoration.com/blog/wp-content/uploads/concrete-office-park-buildings.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container {
height: 100%;
/* image just for reference*/
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS2-Dj0_UAhag-zIDaVGoV2LuCIy62nGvt_zNJoeILF1VqM3EXOdK20qR6N');
background-repeat: no-repeat;
background-position: right;
}
.jumbotron {
background: transparent !important;
}
.jumbotron h1 {
font-size: 36px;
color: white !important;
}
.jumbotron .text{
color:white;
font-size:12px;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>A good <span style="color:lightgreen;">investment</span> pays the best <span style="color:orange;">interest</span></h1>
<p class="text">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p><a class="btn btn-primary btn-lg" style="background:lightgreen;" href="#" role="button">Register</a><a class="btn btn-primary btn-lg" style="background:orange;" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</body>
</html>
With this design, you don't (strait forward that is) The hand part will mess up your grid layout. Or merge images, or use a smaller version of your human image that will stay inside the grid (all blocks are squares with Bootstrap, and there is NO layering beyond background image of parent element.).
* Edit As Kishore Kumar Points out, you can. Something like this:
<body> <!-- has CSS background with buildings -->
<div class="container"> <!-- has CSS background with human, float: right --> <div class="row">
<div class="col-md-3">And more stuff for layout...</div>
</div
</div>
</body>
Here is how i would do.
create a section and give it the background image with background-size: cover; property and then use a container inside the section and put my grid.
<section class="building-bg">
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- text content -->
</div>
<div class="col-md-4">
<!-- png image with some negative margins or translate property -->
</div>
</div>
</div>
</section>