JSFiddle
body {
background-color: #111111;
color: #ffffff;
/*max-width: 100%;*/
overflow-x: hidden;
}
.row {
max-width: 100rem;
}
.svgrow {
min-width: 70rem;
}
.svgrow svg {
overflow-x: auto;
}
I want to have this svg horizontal scrollable on small screens, without the body being horizontal scrollable. In addition to that I want only relative units to be used.
I already tried to put the overflow property in different positions, but I can't get it to work.
I use the foundation framework.
In order for the scrolling to happen, you have to give the container a fixed width. The contents (the SVG) needs to have a width that is greater than the container element. Usually that means giving it a specific width, because otherwise it will just resize to its container.
.svgrow {
max-width: 100vw;
overflow-x: auto;
}
.svgrow svg {
min-width: 70rem;
}
/* My CSS */
body {
overflow-x: hidden;
}
.row {
max-width: 100rem;
}
.svgrow {
max-width: 100vw;
overflow-x: auto;
}
.svgrow svg {
min-width: 70rem;
}
svg {
margin-bottom: 2.5em;
}
.off-canvas-toolbar {
position: fixed;
height: 100%;
width: 8%;
}
<div class="container">
<div class="off-canvas position-left" id="sidebar" data-off-canvas>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="off-canvas-toolbar">
<div class="custom-menu-icon" data-toggle="sidebar">
<i class="fa fa-bars">Icon</i>
</div>
</div>
<div class="row svgrow">
<div class="small-12 columns">
<h1>Title</h1>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
<polygon points="0,1000 60,0 2000,0 2000,1000" fill="#fdedbc"></polygon>
<polygon points="70,1000 970,0 1800,1000" fill="#7c5b18"></polygon>
</svg>
</div>
</div>
<div class="row">
<div id="searchResult" class="small-12 columns" style="">
<h2 class="center">Search Results</h2>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am working with Bootstrap 4 and am trying to have a grid of 4 images, 2 on top and 2 on bottom. I am using the img-fluid class but the image resizes based on the width only making the image height too large and it is getting cut off. I tried setting max-height: 100% but that didn't work.
What's going wrong?
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>
Not 100% sure I'm interpreting the question correctly, but if you want a 2×2 grid of images then you should just be able to do it relatively quick like this;
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>
css:
.panel {
width = whateversizeyouwant;
height = whateversizeyouwant;
display: flex;
flex-wrap: wrap; //the flex stuff should make it display 2×2
}
.panel > img {
width: 50%;
height: 50%;
}
That should work for any set of 4 images.
If you want them to stay the same aspect ratios then under .panel > img set height: auto. Keep in mind this won't give you a perfect square, and the size of the panel div will impact how the images can be sized.
Almost every question and answer I have found talks about the viewport size; this isn't really my issues.
Take this Pen... https://codepen.io/njt1982/pen/pZjZNM
I have a very basic Bootstrap 4 grid like this:
<div class="container mt-4">
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
...
...
</div>
And some CSS to make these into squares (using the padding-top: 100% trick):
.col {
padding: 0;
}
.col:not(:last-child) {
border-right: none !important;
}
.row:not(:last-child) .col {
border-bottom: none !important;
}
.tile {
padding: 100% 0 0;
font-size: 5vw;
}
.tile span {
position: absolute;
left: 0;
top: 50%;
line-height: 0;
width: 100%;
text-align: center;
}
The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. I'd like to avoid tonnes of media queries to "tune" it.
Is there any CSS-only way of saying "font-size = container_height"?
font-size: 100% seems to just set the font to the base size (not the parent size, like you'd expect height: 100% to do). Some goes for the likes of em's...
I've tried vh and that works fine until the viewport height changes (so same problem as vw).
I read something about vb (about the parent block), but that doesn't seem to work? I believe it is still only theoretical.
I am aware of JS-options which could calculate the height of a parent and set it... But I feel like this is something CSS should be able to do and I'm missing a piece of a puzzle.
Could the answer lie in transforms?! or calc()?
UPDATE: Possible answer using SVGs? https://stackoverflow.com/a/51333267/224707
One possible solution I have found is using SVG's...
https://codepen.io/njt1982/pen/EpVeYw
Each column becomes this:
<div class="col border">
<div class="tile">
<svg viewBox="0 0 20 20">
<text x="50%" y="14" text-anchor="middle">A</text>
</svg>
</div>
</div>
Then we drop all notion of font-size and do this:
.tile svg {
position: absolute;
left: 0;
top: 0;
line-height: 0;
width: 100%;
height: 100%;
fill: #333;
}
Seems to scale pretty well - I have not, however, browser tested it...
Here you go:
https://codepen.io/sphism/pen/LBGmRm
Flexbox solution, scales with browser, works in both portrait and landscape, fonts scale, nice clean html, no svg's.
EDIT: added the size-* classes so you can easily change the grid size just by adding the class, eg .grid.size-4 would be a 4x4 grid.
html:
<div class="container">
<div class="grid size-7">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
</div>
</div>
scss:
// 100 would have no space around it
// $gridSize: 90vw; // Works in portrait.
// $gridSize: 90vh; // Works in Landscape.
$gridSize: 90vMin; // Works in both.
.container {
// Full size of page
height: 100vh;
width: 100vw;
// Center the grid x and y
display: flex;
align-items: center;
justify-content: center;
}
.grid {
// Grid will center in container if you want a bit of space around it.
height: $gridSize;
width: $gridSize;
// This is how we make the grid
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
}
// Styles for all tiles
.tile {
display: block;
border: 1px solid gray;
text-align: center;
box-sizing: border-box;
}
// Number of rows and columns.
// $size: 8;
#for $size from 1 through 8 {
// eg 100/8
$tileSize: $gridSize / $size;
// Half th esize of the tile, or whatever you want.
$fontSize: $tileSize * 0.5;
.size-#{$size} {
.tile {
// Constrain the tiles to exact size we want.
width: $tileSize;
min-width: $tileSize;
max-width: $tileSize;
height: $tileSize;
min-height: $tileSize;
max-height: $tileSize;
flex-basis: $tileSize;
// Set fonts to same line height as tile, center them and set font size.
line-height: $tileSize;
font-size: $fontSize;
}
// Just hide extra divs so it renders properly.
$maxTiles: $size * $size + 1;
.tile:nth-child(n + #{$maxTiles}) {
display: none !important;
}
}
}
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?
I have tried different ways to align contents inside div :
1) table and table cell but it acts weirdly with width
2) I have padding which wont align properly with for every content because data differ.
Note : My actual code is inside ng-repeat
HTMl :
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" >
<img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that will wrap to multiple lines in small screens</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6 ">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that wil</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large </p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS :
.offer-horizontal {
min-height: 194px;
background-color: #EEF0F1;
border: 5px solid #fff;
text-align:center;
}
.offer-logo-div-horizontal {
min-height: 194px;
text-align: center;
}
.offer-logo-horizontal {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
JSFiddle
My Question : How content I make data inside div vertically align.
Any help is appreciated.
Depending on your browser support, flexbox will achieve this:
Browser support: http://caniuse.com/#feat=flexbox
JSFiddle:
http://jsfiddle.net/22xvnjd5/4/
I've added the following rules to your code:
.offer-horizontal {
padding-bottom:20px; /* Tidy up the spacing on smaller screens */
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
}
Not necessary for alignment, but I also adjusted the image min-height as it caused a massive gap on smaller screens!
.offer-logo-div-horizontal {
min-height: 90px;
}
#media (min-width: 768px) {
.offer-horizontal {
min-height:194px;
}
}
So, I'm trying to get this to display properly on mobile phone for the class 'circle-right right' div. Right now, instead of being centered, the circle-right class is displaying too far to the right instead of center. On desktop it displays correctly.
<div class="path-container">
<div class="row">
<div class="large-12 columns ">
</div>
</div>
<div class="row path-item">
<div class="large-7 push-5 columns">
<div id="img1" class="circle circle-left "></div>
</div>
<div class="large-5 pull-7 columns path-text left">
<h3 id="pstop1">Get in touch!</h3>
<a class="pathlinks" href="#" data-reveal-id="myModal">Get in touch>></a>
</div>
</div>
<div class="row path-item">
<div class="large-7 columns">
<div id="img2" class="circle circle-right right"></div>
</div>
<div class="large-5 columns path-text right">
<h3 id="pstop2">Give us feedback!</h3>
<p class="shadow">We're not happy unless your satisfied. During the process, we'll be in touch to make sure we're on the right track.</p>
Get in touch>>
</div>
This is most of the default css that comes with the foundation path template. Tried using media query to select the class and adjust the position, but it wont work. Here's a link to the template http://patterntap.com/code/responsive-timeline
css:
.path-container .path-item .circle.circle-right {
right: 100px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
right: 0;
left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}