I recently started an intro web dev course on Udacity. They're covering a basic grid framework right now, and the whole project is easy except I've been working for hours on aligning captions correctly under their images. The goal is to imitate the portfolio page mock-up in the imgur link here (http://imgur.com/CIQWlBi).
Now, what I'm trying to do, mostly for the sake of learning to do it, is:
distribute/justify the images and captions under "Featured Works" across the whole width of the grid; left-aligned for left image and right-aligned for right image
use one grid column for each image-and-caption (I can easily make my page resemble the mock-up by dispensing with the grid and simply using flexbox with justify-content: space between, but there SHOULD be a way to do this WITH the grid, I think.)
center captions (h3 and p) relative to the IMAGE, not relative to the grid column. This makes a difference on the leftmost and rightmost columns.
The last one is what's been giving me trouble. I've finally said screw it, I'll ask people much smarter than me to solve what's probably a really simple problem. I've tried several different solutions from posts here and on other forums, and none have worked. A couple of things I've tried are (display: table) + (display: table-caption), and (figure) + (figcaption), both of those with a few different style rules.
Is there a clean way to center text under images regardless of the image's position within the container? Or do I need to create containers with explicit sizes for each image, within the columns, and position the text within each container?
Again, flexbox allowed me to replicate the mock-up, but for the sake of learning I'd like to be able to do this within the grid.
EDIT: I forgot to include code snippets. They're rough because I've been trying a bunch of different things.
* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- see how boxes line up
* {
border: 1px solid red !important;
} */
.grid {
margin: 0 auto;
min-width: 960px;
max-width: 1360px; /* caption text centered (relative to image and grid column) at 960px, but I want to see it centered at any width */
}
.row {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 49.99%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
figure {
display: block;
margin: 0px;
}
figure figcaption {
text-align: center;
}
#header {
border-bottom: 3px solid #BCBBBB;
margin-bottom: 30px;
padding-bottom: 15px;
}
#nameheader {
text-align: right;
}
#subname {
margin-bottom: 0px;
}
<body>
<div class="grid">
<div class="row" id="header">
<div class="col-6">
<img src="http://placehold.it/100x100" alt="placeholder">
</div>
<div class="col-6" id="nameheader">
<h1>JANE DOETTE</h1>
<p id="subname">FRONT-END NINJA</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="http://placehold.it/960x350" alt="placeholder">
</div>
</div>
<div class="row">
<div class="col-12">
<h2> Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-4">
<figure class="left">
<img src="http://placehold.it/300x200" alt="placeholder" class="left">
<figcaption>
<h3>APPIFY</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure class="center">
<img src="http://placehold.it/300x200" alt="placeholder" class="center">
<figcaption>
<h3>SUNFLOWER</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure class="right">
<img src="http://placehold.it/300x200" alt="placeholder" class="right">
<figcaption>
<h3>BOKEH</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
</div>
</body>
Your current CSS is really quite close to achieving what you want. The only problem left is that the <figure> around each of your images has display:block - which means it will expand to the full width of its container (the enclosing column elements).
This is a problem because your parent columns are always resizing once the browser is wide enough, while your images are statically-sized. As you've noted, this means your caption text will no longer be centered under your image after a certain browser width.
To address this, consider changing your styling for <figure> to:
figure {
display: inline-block;
margin: 0px;
}
This way, your <figure> elements will only expand as wide as they need to based on their contents, rather than always expand to the full width of the enclosing column, so the caption text will no longer be centered relative to the resizing column. Here's a JSFiddle to demonstrate.
Hope this helps! Let me know if you have any questions.
Related
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
The problem is that I have an image on the left side of my screen and I have a paragraph on the right side of my screen and I have an hr line below the paragraph and the image. So whenever I resize the browser window, the paragraph just goes below the hr line because it gets compressed(squashed) on resizing. I don't want the paragraph to go below the hr line even if I resize the browser window. I want the paragraph to go below the image but not exceeding the hr line. If you want to see what is the problem please check out my website and resize the browser window to see the problem.
Link to website: http://www.greenfield-school.com/AboutUs.html
Thanks
This is the HTML:
<h3><b>About Us</b></h3>
<hr style="border: 2px solid green; width: 88%">
<div class="row2">
<div class="column2" style="background-color:;">
<img class="pic img-responsive" src="Icon.jpeg" style="height: 200px; height: 230px">
</div>
<div class="column" style="background-color:;">
<h5 class="welcome"><b>Mission</b></h5>
<p class="paragraph" style="font-family: book antiqua"><li class="vision1">To care for, respect and encourage all children equally, regardless of gender or ability.</li>
<li class="vision1">To encourage our pupils to develop a sense of self worth, self discipline, personal responsibility and consideration for others.</li>
<li class="vision1">To provide an enjoyable, challenging and purposeful atmosphere for our pupils.</li>
<li class="vision1">To value and encourage the special talents and strengths of pupils.</li></p>
</div>
</div>
And this is the CSS:
.vision1 {
list-style-type: square;
font-family: book-antiqua;
}
.row2{
display: flex;
padding: 2rem 6rem;
}
.column {
flex: 60%;
height: 200px; /* Should be removed. Only for demonstration */
}
.column2{
flex: 0%;
height: 0px; /* Should be removed. Only for demonstration */
}
h3{
padding: 5rem 5rem 0rem;
color: green;
}
Let me offer you an alternative - I can't seem to trigger that auto-adjust on the container height. But this works seamlessly:
This is your HTML:
<div class="container">
<div class="column one"> Column 1 - this is where your picture is</div>
<div class="column two"> Column 2 - this is where your paragraph is</div>
</div>
<hr />
This is CSS:
.container{
width: 100%;
overflow: auto;
height: auto;
clear: both;
display: block;
}
.column{
float: left;
}
.column.one{
//style for column one here
}
.column.two{
//style for column two here
}
hr{
clear: both;
}
This will adjust the height of the container based on on the biggest height of either column one or column two
I have checked this code here CodePen
I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -
I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -
HTML
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
<img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
<h4>POST PRODUCTION</h4>
<img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
<h4>2D / 3D ANIMATION</h4>
<img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
<h4>ADHOC</h4>
<img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
<h4>INTERACTIVE & PERSONALISED</h4>
<img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
<h4>TV ADVERTS</h4>
<img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
<h4>360 VIDEO & VIRTUAL REALITY</h4>
</div>
</div>
CSS
section#products {
height: 700px;
max-width: 100%
}
.row {
height: 350px;
max-width: 100%;
}
.agencyproducts {
position: relative;
display: block;
text-align: center;
}
.agencyproducts img {
position: relative;
line-height: 1;
top: 50%;
}
.agencyproducts h4 {
display: block;
text-align: center;
font-size: 10px;
}
The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.
The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:
figure {
text-align: center;
display: inline-block;
max-width: 100px;
vertical-align: top;
margin:10px;
}
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image with a longer caption
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!
just example (not copying your code - just simple example script):
HTML:
<div>
<img src="one.png" class="inlineImg" />
<img src="two.png" class="inlineImg" />
<img src="three.png" class="inlineImg" />
</div>
CSS:
.inlineImg {display: inline;}
this will display the images on a single line (providing the div is big enough)
.agencyproducts {
position: relative;
display: inline-flex;
text-align: center;
}
And you could put the main title outside of row div
That should all make them horizontal. You may need to add some padding to separate the items tho.
You can wrap the img- and h4-Tags with a div-Tag and make it float.
<div class="wrapper">
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
</div>
CSS:
.wrapper {
float: left;
}
Don't forget to unfloat afterwards.
The H4 will make them 'stack' vertically. Best to enclose each image and heading in it's own block or span, and on that div/span use " display: block; float: left;".
Basicly the h4 element has automaticly a wifth of 100%, you can check this easily with the inspection tool of your browser.
The easiest was is to put a div arround h and img element
<div class="containerIcon">
//img element
//h element
</div>
.conainterIcon {
display: block;
width: 13%, //So they all fit in one line
float: left;
}
Put the image and the title below in a div, and float them all to the left. Like so—
.bullet-point { float: left; }
.clear-float { clear: both; }
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></div>
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}