I have a react component and I would like to display inline-block 3 photos in a row with it's names under each photo, and every next 3 elements under (in new row) and so on...
I think I need to use something with:nth-child(3n+1) but something goes wrong...
const Photos=(props)=>{
return(
<div className="photos-list">
<img className="photo-img"
src={props.memoriesPath}
alt={props.memoriesName}
/>
<div className="photo-name">{props.memoriesName}</div>
</div>
)
}
export default Photos
Could you please tell me how should css look like?
wrap all photos components in a div then style div with grid box like this:
<div classname="parent">
<Photos />
<Photos />
<Photos />
</div>
and css:
.parent {
display:grid;
grid-template-columns:auto auto auto;
}
Related
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
I've got the following code, that's basically an Auth0 login form and it includes the logo image as an img element, which has it's own shadown tree: It looks like this:
<div class="auth0-lock-header-welcome">
<img alt="" class="auth0-lock-header-logo" src="/supp/pixel.png">
#shadow-root (user-agent)
<span>
<img />
</span>
<div class="auth0-lock-name" title="Log in">Log in</div>
</div>
How do I select the <span> in the #shadow-root, the <img> or even both in a classic .css file? Or do I have to write some React code for it?
Here's what I tried (none worked):
.auth0-lock-header .auth0-lock-header-logo::shadow #shadow-rootspan{
display: none;
}
:host(.auth0-lock-header .auth0-lock-header-logo #alttext-image) {
display: none;
}
PS: Sorry if it's a stupid question.
My HTML is like this:
<div id="grid-container">
<slot name="items-to-be-filled"></slot>
</div>
I have formatted the above with CSS like this:
#grid-container {
display: grid;
}
However, the items that I filled into the slot seem to be out of order. I examined using developer's tool and found out that the slotted items are not being treated as grid items.
Is it possible to treat slotted items just as normal children nodes? Thanks.
The Shadow DOM isolate external from internet CSS styles.
As a consequence, and to be effective, the CSS property display: grid should be placed in the Shadow DOM.
host.attachShadow( { mode: 'open' } )
.innerHTML =
`<style>
#grid-container { display: grid }
</style>
<div id="grid-container">
<slot></slot>
</div>`
<div id="host">
<span>one</span>
<span>two</span>
<span>three</span>
</div>
I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:
Screenshot
But what I want is
The code to generate the grid looks like this:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
I'm using Vue.js for this template.
So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.
Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.
Thanks for your help! :)
You need to add something every 2 col-md-6 to ensure the left floats clear..
One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..
#media (min-width: 768px) {
.row > .col-md-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/oAiZNlWgau
There are a few ways to achieve this.
Wrap each row into it's own row
<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>
You can also set a min-height for each item, that way they will always be the same height.
Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.
Hope this helps :P
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}