I'm tried to used responsive aviatar for my main page in website, everything works well except the figcaption that giving problems both in desktop view and media query.
Any suggestion or workaround I should modify.
.breakpoint { /* One column for smartphones */
max-width: 33%;
display: inline-block;
margin: 4px;
}
.breakpoint figcaption {
text-align: center;
padding-top: 5px;
font-style: italic;
font-size: 8px;
text-indent: 0;
}
<section id="responsive-images-breakpoints">
<a href="public_transport/index.htm">
<img class="breakpoint avatar" src="images/airport-kix/airport-bus.jpg" alt="Public Transport">
<figcaption>Public Transport</figcaption>
</a>
The figcaption element should be embedded inside the figure element.
Example:
<figure>
<img src="" alt="">
<figcaption></figcaption>
</figure>
Related
I have the two images below in HTML and wanted to put them next to each other,however it seems one gets placed under the other.I have used the CSS display:inline-block to address this issues.
HTML :
<figure>
<div class="child">
<img class="childhood" src="/home/ali/FullStack/try/Images/1.JPG">
<img class="childhood" src="/home/ali/FullStack/try/Images/2.JPG">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
CSS:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
}
I Was wondering what am I doing wrong that is preventing the two images from being displayed next to each other?
your code is working, maybe the size of your two images can't fit in the screen
check this code:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
width: 200px;
}
<figure>
<div class="child">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
try this:
.child {
display: flex;
aign-items: center;
justify-content: center;
flex-wrap: wrap;
}
figcaption {
width: 100%;
}
.childhood {
width: 50%;
}
Let me know
I'm practicing CSS and I stumbled across a minor problem. I have and article tag with a headline(h2) and a figure. I want to move the headline to be below the figure tag.
I tried to float the headline the right and that worked but the problem was I couldn't get it below the figure. When I obviously made the figure smaller so the headline would fit but I figured if I make it big enough in width it would push down the headline. Nope, the headline just spanned over, like it covered the figure.
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<h2>Headline</h2>
<figure>
<img src=""alt="image">
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
If you use order: -1; on the item with display: flex; on the container, this will bring that item up to the top.
div {
display: flex;
flex-direction: column;
}
h2 {
text-align: center;
color: #F9F9FA;
background: #a8a8ff;
padding: 1em;
}
figure {
background: #ebe3ff;
order: -1;
}
img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin: 0 auto;
}
<div>
<h2>Headline</h2>
<figure>
<img src="#"/>
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
</div>
Have you tried to simply move the <h2> below the image?
Like the following:
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<figure>
<img src=""alt="/>
<figcaption>text</figcaption>
</figure>
<h2>Headline</h2> <!-- moved the h2 below -->
<p>Text text</p>
The easiest way is a outer container with display flex
Here you can find more information about display:flex
Also you had a missing " at yout alt="" tag
.outer{
display:flex;
flex-direction:column-reverse;
}
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<h2>Headline</h2>
<figure>
<img src=""alt=""/>
<figcaption>text</figcaption>
</figure>
</div>
<p>Text text</p>
As others have pointed out, you could just move the actual h2 element and place it under the figure, but it seems you want to see if its possible with css alone.
There are a few ways, not ideal ways, but there are ways:
You could adjust the margins of both elements, for example, the h2 element will have a top margin of 50px and the figure element will have a top margin of negative 50px (-50px) (probably one of the worst ways to do it)
Another way is to simply give the elements a table layout display of table-footer-group and table-header-group like this:
<h2 style="display: table-footer-group;">Headline</h2>
<figure style="display: table-header-group;">
<img src="" alt="">
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
First of all, I just wanted to say this page is for a Web Design course.
I have icons for social media in a responsive page I'm building, and I've applied a max-width:3% to all of them to reduce their original size, as they were too big before. Now, as I reduce the size of the window, I would like the icons stay responsive while retaining their new size. However, the icons scale as well, making them appear too small. I know I could use pixels to define a fixed size, but one of the objectives of this exercise is to not set image values in pixels (just allowed for padding values).
Is there a way to achieve this?
My html codes
<div id="footwrap">
<footer>
<div id="footh3">
<h3 class="h3">Follow me on social media:</h3>
</div>
<div id="footlink">
<a href="http://www.facebook.com" target="_blank">
<img src="images/facebook-icon.svg" alt="Facebook">
</a>
<a href="http://www.instagram.com" target="_blank">
<img src="images/instagram-icon.svg" alt="Instagram">
</a>
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtube-icon.svg" alt="YouTube">
</a>
<a href="http://www.twitter.com" target="_blank">
<img src="images/twitter-icon.svg" alt="Twitter">
</a>
</di>
</footer>
</div>
My CSS style:
#footwrap {
clear: both;
padding: 2%;
}
footer {
position: relative;
clear: both;
text-align: center;
width: 100%;
height: 8em;
margin-top: 12%;
}
#footh3 {
display: inline-block;
}
footer h3 {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 1.17em;
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
#footlink {
display: inline-block;
}
footer a {
text-decoration: none;
}
footer img {
display: inline-block;
max-width: 3%;
height: auto;
margin-left: 1.5%;
margin-right: 10px;
vertical-align: middle;
}
The desired outcome would be how the icons in the top right corner of this page react when the web browser window is reduced: http://www.omganeshaya.com/
You can use media queries to adjust to a higher percentage as the page gets smaller. see fiddle: https://jsfiddle.net/622r62mp/
For more information about media queries you can reference this site https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
CSS example
img{max-width:3%}
#media (max-width: 1000px){
img{max-width:9%}
}
#media (max-width: 600px){
img{max-width:15%}
}
I'm sorry if this is a repost, but this is something I've been researching on here for awhile now and I can't seem to come up with the right answer. I'm trying to get these images to appear in the exact center of the page with the captions underneath, but they keep going on the left side of the page.
Here's my html
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
And the css
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
Here's what I see:
Thanks in advance. I greatly appreciate any help.
You want them horizontally or vertically aligned?
vertically:
figure {
display: block;
text-align: center
}
horizontally:
body {
text-align: center;
}
figure {
display: inline-block;
text-align: center
}
Try wrapping your elements with Div container to control the position.
This is a hacky way of doing it. But you can adjust the .center class to get it where you want on the page, i.e. adjust the right: and/or left properties.
.container {
position: center;
width: 100%;
}
.center {
position: absolute;
right: 30%;
width: 300px;
background-color: #b0e0e6;
}
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
</div>
</div>
html
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
css
figure{
width:30%;
display:inline-block;
margin:1%;
margin-left:1.5%;
}
figure img{
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
figure figcaption{
text-align: center;
}
https://jsfiddle.net/Ljdxnwot/3/
Update
OP has clarified that the images are to be side-by-side and centered vertically as well.
Place everything in a div or section (any block element will do)
I used a section with the following styles:
display: table; will make it act like a table
height: 100vh; will make it as tall as the viewport (your screen)
margin: 0 auto; auto will adjust left and right until both are equal
Added the following to the figures:
display: table-cell; will make it act like a table cells
vertical-align : middle; will actually work on table cells
Updated Snippet
section {
display: table;
height: 100vh;
margin: 0 auto;
}
figure {
vertical-align : middle;
display: table-cell;
margin: 0 auto;
text-align: center;
}
figure img {
width: 20em;
}
figure figcaption {
text-align: center;
}
<section>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
</section>
- There's a "'" (single quote) missing on the first alt
Change figure to block or remove it as I did since figure is display: block by default.
Add text-align: center to figure
Note: the original image was off center (of course), so I edited it to be symmetrical.
See snippet below.
Snippet
figure {
margin: 0 auto;
text-align: center;
}
figure img {
vertical-align: top;
width: 20em;
}
figure figcaption {
text-align: center;
}
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>