I am having issues with coding the home page of my photo grid exactly like this one here:
If you check out my code here:
You can see that the top two images of the first row are distorted. I would like the full photo grid to show up in both my tablet and desktop version of my site but I'm currently having issues with resizing the images.
May someone help me please?
I've already tried setting the width to 100% and height to auto and it didn't work.
#media screen and (min-width: 768px) {
.top-section {
display:flex;
width:100%;
height:100%;
}
.section-one img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
.section-two img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
The centering of the images in your first example is realized through javascript (maybe you noticed it, anyway...)
I would make these edits: you don't need to use display:flex (or at least I guess so), .top-section must always have width: 100% (remove the media query on it); add to .section-one and section-two another class, maybe .section-box with this properties
.section-box {
height: 70vh;
width: 100%;
}
#media screen and (min-width: 768px){
.section-box {
width: 50%;
float: left;
}
}
then, add to .main-image
.main-image{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
and remove the img tag inside each .main-image div; you will display the image setting the background-image property, for example
.section-one .main-image {
background-image: url("img/baja-hero.png");
}
Related
This is yet another question about centering vertically in a div, but I've tried lots of the solutions discussed in other answers to no avail.
Here's an example of the code to play with: https://codesandbox.io/s/z2qzxwk99x
The arrow-icon is centering vertically in the viewport, instead of the viewer-wrapper div. As such, it drops off of the image completely, instead of staying centered vertically, if you make the page very narrow.
.viewer-wrapper {
background-color: #1b8dbb;
position: relative;
}
.arrow-wrap {
position: absolute;
max-height: 100%;
line-height: 95vh;
background-color: #4cae4c;
margin: auto;
opacity: .9;
left: 0px
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit: contain;
max-height: 95vh;
width: 100%;
}
<div className="viewer-wrapper">
<div className="arrow-wrap">
<LeftArrow className="arrow-icon" size={75} />
</div>
<img className="comic-page"
src="http://assets-production.rovio.com/s3fs-public/hatchlings_0.jpg"
about="This is an image"
/>
</div>
The magic here is Flexbox (and Grids, but Flexbox has way better browser support). Keeping the same HTML layout, you could use somerthig like:
.viewer-wrapper {
background-color: #1b8dbb;
display: flex;
align-items: flex-start;
}
.arrow-wrap {
background-color: #4cae4c;
margin: auto;
opacity: .9;
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit:contain;
min-height: 100%;
max-width: 100%;
}
Depending on how much support you need of IE, there are different ways to accomplish vertical alignment.
If you don't have any need to support IE, you could use the flex display property:
.viewer-wrapper{
display: flex;
align-items: center;
}
or, continue with what it looks like you're trying to do. What your missing to do so is the top: property. Since you've already correctly made the parent element position: relative, setting top: 50% will set your arrow to begin halfway down the viewer-wrapper element. From here you need to set a negative margin to correct for the arrow's height. Since it looks like you specify a size of 75(px?), you can achieve this like:
.arrow-wrap {
position: absolute;
background-color: #4cae4c;
margin-top: -37.5px;
left: 0px;
}
You shouldn't have to set any other margins.
A great resource for this, and what I used to help answer you, is howtocenterincss.com.
The image on my home page is left aligned.
While it looks great on desktop, it does not look good on mobile
I am trying to "center" the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views.
I have tried the following without success :
#media all and (max-width: 675px) {
.entry-image.attachment-post.gsfc-alignleft {
width: 100%!important;
max-width: none;
text-align: center;
margin-left: auto!important;
margin-right: auto!important;
}
}
My website is : parlons-survivalisme.com
What am I missing ?
You need to set the outer a Tag to width: 100% in order to align the image above the whole width.
For instance:
a.alignleft {
width: 100%;
}
As advised by Luca, changed the code to the following, which works !!
#media all and (max-width: 675px) {
a.alignleft {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
There are 2 straightforward solutions to center an image.
The first is to set your image to 'display: inline-block' and then wrap it with an outer div where you set the 'text-align' property to center.
.wrapper-div {
width: 100%;
text-align: center
}
.img {
display: inline-block;
}
The other solution is to make sure your img is a block element (display: block) and then set the margin-right and margin-left to auto.
.img {
display: block;
margin-right: auto;
margin-left: auto;
}
If you still have a bug, look at the parent element width (to make sure it is 100% on small screens).
I’m trying to horizontally center my logo on for my mobile version of my site. I can’t get it to center, though. I’ve tried various things but nothing seems to move it.
My code is:
#media only screen and (max-width: 640px) { .logo-image .logo img {
max-height: 70px;
margin-top: -15px;
margin-bottom: 15px;
width: auto;
background: center;
}
}
For h1.logo try text-align:center;
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
I would like to center some div which has background image. There is problem with response of this div, because if I set width on 80% and height on 80% the bg-image is not on center. I tried everything, but the picture can't just stand on center and if the browser is smaller or bigger this is very big problem.
So if you look at the picture
I want to make this white block responsive.
There is a little of css which I've already written, but for now is non-responsive:
top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
You could use CSS transform:
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I wanted to do the same thing 2 years ago, there's the solution:
Because you want it responsive, you may use the #media function in CSS3. Like this:
#media (max-width: 480px) {
#div {
top: 50%; /* IMPORTANT */
left: 50%; /* IMPORTANT */
display: block;
position: absolute;
background: url(images/background.png) no-repeat center center;
width: 750px;
height: 417px;
margin-top: -208.5px; /* HALF OF THE HEIGHT */
margin-left: -375px; /* HALF OF THE WIDTH */
}
}
The max-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!
It will center the image on the page.
You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.
You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.
EDIT: JSFiddle
Try with auto margins and display as table:
.your-class {
margin-left: auto;
margin-right: auto;
display: table;
}
You can use margin:0 auto; to center a div horizontally as long as its width is less than that of the container div.
Please try this:
img { max-width:100%; max-height:100%; margin:auto; }
.container{display: flex; justify-content: center; align-items: center}
I have used display: inline-block; on element to center and text-align: center; on parent div.