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).
Related
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");
}
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 {
/* ... */
}
}
Code given:
http://jsfiddle.net/95u9Q/
#wrapper_login {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background: black;
}
#login {
z-index: 22;
width: 300px;
height: 400px;
margin: -200px auto 0 auto;
background: #000;
}
The centering works fine! The Problem is: If having a windows height below 400px the full #login should be visible and scrollable. currently a scrollbar is visible, but it is not possible to see the full #login, the scrollbar just don't contains the whole #login.
I think its because of position absolute and the negative margin-top, also I don't know how to improve the code so it works in the way it should.
Thanks in advance for the help!
Your parent container that is #wrapper_login should have a relative position instead. and the child container #login the position of absolute for this to work seamless across different Resolutions. You could use top and left values for #login to set it at the right postion.
Looks like a job for a media query
#media screen and (max-height: 400px) {
#wrapper_login { position: static; }
#login { margin: 0 auto; }
}
http://jsfiddle.net/95u9Q/2/
I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.
I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.
Here's a link to the catalog on the website: http://internetvolk.de/katalog/
try using display: inline-block; istead of floating and add text-align: center to their parent container)
Augment with the following rules:
#katalog {
text-align: center;
}
and
.imageLink {
/** float: left; <-- REMOVE! */
display: inline-block;
}
if you give #katalog a width - calculate this from the number of images and their margins. e.g.
#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}
#katalog {
margin: 10px auto 0;
overflow-y: hidden;
max-width: 940px;
min-width: 810px;
}
Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;
My dilemma is this (and should be simple, I suspect): I have a container and a set of items (both divs). The following CSS applies:
.container {
float: left;
width: 100%;
}
.item {
margin: 32px;
text-align: center;
position: relative;
float: left;
}
The .item itself is a container that could have almost any set of arbitrary elements, but they need to be center aligned inside of it (in my case, it typically contains a thumbnail image and a small caption of text beneath it). While the above CSS allows each .item to flow horizontally the way I like, I can't figure out how to make the whole set center aligned (as opposed to flowing from left to right like it does now).
edit
Change .item { display: block; } to .item { display: inline-block; }, take away .item { float:left; } and add text-align: center; to .container
You can see it here: http://jsfiddle.net/JMC_Creative/RQrRb/
You could also put an .inner div with width:75%; margin: 0 auto; and then put your .items in that, if you are looking to have some space on the sides.
You'll want to take a look at this tutorial from Mozilla. It can be center aligned by just setting the parent container to text-align:center;
Cross Browser Inline Block
.container {
width: 100%;
}
.item {
margin: 32px;
text-align: center;
}