So I'm trying to mimic some of the look of this website:
http://quay.com.au/
Since I'm intrigued by the design. I'm wondering how to go about overlapping containers in rows using Bootstrap, since I've looked into the code and it seems like that's what they're using.
This is what I have for HTML so far:
<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
<h3>About</h3>
<p><b>Info1</b></p>
<p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
<h3>Projects</h3>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
<h3>Work</h3>
</div></div>
</div>
</div>
Any suggestions? Something to do with z-index in css is my only guess...
Looking at the code on the site the container has a position: relative and to get the sections overlapping the sections are offset from the top, like The Query Experience
.page-index .pattern-gray {
top: -240px;
}
quick bootply http://www.bootply.com/Blms3j1GjO
What you're looking for is called Parallax Scrolling. There are several tutorials out there, and a full implementation would be difficult to include in one answer here.
Here's a good resource from David Walsh on this
Basically, this is a combination of background-attachment: fixed and overlapping div elements, and some javascript to flop the selected image when it's hidden.
I hope that helps.
Related
I have this setup in a section, but Bootstrap break the 3rd column into a new line, why?
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3 pl-3" id="portraitPreviewColumn" style="padding-left:0">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3 pl-3" id="socialPreviewColumn" style="padding-left:0">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Looks like this:
I removed padding left, but has the same phenomenon.
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3" id="portraitPreviewColumn">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3" id="socialPreviewColumn">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Try to add
class="img-fluid"
to the images.
The documentation says:
Responsive images Images in Bootstrap are made responsive with
.img-fluid. max-width: 100%; and height: auto; are applied to the
image so that it scales with the parent element.
Source: https://getbootstrap.com/docs/4.0/content/images/
I think, your screen is too small
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
try col-6 col-3
Problem was that the parent container had padding. I set it zero, and then all the 3 item got into one line.
I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?
I wrote the following code containing the images:
<div class="container container-margin">
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/battleport.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">Battleport</h6>
<p><i>Study</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/crmfabriek.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">CRM Fabriek</h6>
<p><i>Business</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-thrid">
</div>
</div>
Besides that I've looked at the following topics
How to keep responsive images same height?
How can I make all images of different height and width the same via CSS?
Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?
Not sure if this is what you are looking for, but might be the fix.
div{
width: 100%;
text-align: center;
}
img{
max-width:100%;
max-height: 300px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>
I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
I am brand new to coding and have not been able to determine why two seemingly identical pieces of code do not work the same. This exercise involves simply making a picture appear on a web page. Easy enough, but I do not see why the same code only works one out of two times.
This code works:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg"
</div>
While this code does not:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg"
</div>
I checked the source for the non-working photo and it is valid. (Check it yourself if you like ultra-cute puppies).
What am I not seeing? (besides the puppy picture, obviously).
Thanks.
You are not using the img tag, you are just writing plain text.
Change to this (notice the brackets):
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg" />
First and 2nd code snippets look the same, no reason either of them should work.
try this
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg">
</div>
or this:
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
I recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link