Working in a Wordpress post, I want to add two images side-by-side and keep the block of images centered (one is aligned left, the other right). (That on its own I've got.)
When the page size is smaller, I want the images to stack. (That I've got.)
But the images aren't then centered in the page in this responsive mode. First one is left and the other right.
I've played with different image alignments through WP, but I can't get the combination to work.
Here's my html:
<div class="ps-image-container">
<div class="ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
and css:
.ps-image-container {
display: block;
/*width: 98%;
margin: 0 auto;*/
}
.ps-inner-image-container {
/*display: block;*/
width: 98%;
margin: 0 auto;
}
.ps-image-container::after {
content: "";
display: table;
clear: both;
}
.ps-responsive {
width: 49.99999%;
float: left;
}
#media only screen and (max-width: 500px){
.ps-responsive {
width: 100%;
}
}
There is some key concept that I'm missing.
If I understand your goal correctly, you want to do two things with your responsive layout:
Switch the image containers (.ps-responsive) between 50% and 100% widths so they go from being side-by-side to stacked (they can stay floated left)
Switch the text-align property of these containers between left/right and centred so the images inside them will go from the inner edges of these containers to the center.
It looks like you're close but you don't need so much code. See this fiddle for a working example: https://jsfiddle.net/ds2vuqng/26/
You can clear the float's in css by:
clear:both;
You can also use Bootstrap to fix this and using the container and text-center as a part of you class in ps-inner-image-container like:
<div class="row ps-image-container">
<div class="container text-center ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
I'm not sure if this will fix your problem otherwise write again :-)
Related
So, I need to get 2 images next to each other, but centered. I've gotten to figure out how to center an image, but not how to center two of them. The problem is in the CSS with display: block;, and display: inline-block; doesn't work - it's as if it's simply inline.
My code to center one image:
CSS:
img {
margin: 0px auto;
display: block;
}
HTML:
<h1>This Week's Photo Features</h1>
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
Use CSS.
<div style="text-align:center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
The previous answers are more-or-less correct, one solution is to put the images in a container and center the container:
div {
margin: 0 auto;
width: 220px;
}
Here's a fiddle to better demonstrate:
https://jsfiddle.net/boa5rej1/
Place both images in a container and center that container like this
<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
You can use Almost any container you like.
I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.
CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: #media all and (max-width: 958px) {
this should work.
#media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.
https://jsfiddle.net/evc670st/1/
Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.
Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
When resizing the page to a smaller width, I want the three col-# divs to stack on top of each others only after a certain point. As it is now, the col-3 div goes immediately under as soon as I resize the page; and col-2 readjusts the <h3> and <p> texts until its width is 301px and then stacks under also. What determines these 'stacking points', so I can control them? I can not find the property.
PrtSc: columns stacking
(Before I had all 3 columns' widths with percentages (25%, 50%, 25%) and the contents overlapped when resizing the screen)
<!-- HTML starts here. This inside a colophon a footer -->
<div class="engage-row">
<div class="col-1">
<img src="">
</div>
<div class="col-2">
<h3>
</h3>
<p>
</p>
Signup Form
</div>
<div class="col-3">
<img src="">
</div>
</div>
<div class="footer-wfix
</div>
<!-- HTML ends here -->
/* In CSS, in the child-theme I have this */
.engage-row:after {
content: "";
display: inline-table;
clear: both;
}
.col-1{
float: left;
width: 301px;
}
.col-2{
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
.col-3{
float: left;
width: 301px;
}
.footer-wfix {
clear: both;
}
Thanks.
Here's a Bootply with working stack examples along with the pixels at which they stack. This is designated by the screensize column modifiers (more on that below).
http://www.bootply.com/ygqBb2GxrV#
You wan't to wrap everything that's stackable in it's own "row"-classed div. Then use the screensize modifiers on the column classes (i.e. col-md-5)
xs - extra small screen
sm - small screen
md - medium device
lg - large screen
I have a problem with a website I am developing right now, and I've been scratching my head here for a while. Basically I have a responsive design, however I want the images to all be centered together (with the yellow image directly above where the magenta image is currently) and then the 'block' of images to center horizontally and vertically within available space. The code is currently hosted at http://dorreen.webfactional.com
The problem is that the images are misaligned - the top images are spread out and the bottom images are clustered together. I'm not sure exactly what I should post - Here's a JSfiddle (Except the fiddle sort of works how I want it to)
The code:
#textContent { width: 49%; }
#imgContent { width: 49%; }
.content {
float: left;
padding: 0% 0.5%;
}
.content > img { margin: 0.5% auto; }
<div class="content" id="imgContent">
<img src="http://placehold.it/240x240/ff0000/000000" />
<img src="http://placehold.it/240x240/ffff00/000000" />
<img src="http://placehold.it/240x240/00ff00/000000" />
<img src="http://placehold.it/240x240/ff00ff/000000" />
</div>
What you're seeing is the text-align: justify of the image container aligning all but the last line. To a zeroth approximation, text-align:left (or center, I guess) should help you.
So, i'm making this page:
http://www.fasade-petek.si/
The header has 3 images (logo, text, facebook) - this is inside :
<div id="FB_GPlus_logo">
<a href="http://www.facebook.com/5ekdoo" target="_blank">
<img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
</a>
</div>
<div id="logo">
<img src="img/logo.png" height="80" width="214"></img>
<img src="img/Napis.png" height="80" width="448"></img>
</div>
logo and text (image) are positioned using margins, facebook is float:right.
#FB_GPlus_logo {
float: right; /* add this */
position: relative;
padding-top: 35px;
}
#logo {
/* border: 1px solid #FF0004; */
/* Na sredino */
display: table;
margin: 0 auto;
overflow: hidden; /* if you don't want #second to wrap below #first */
padding-right: 170px;
}
#logo a {
padding-right: 250px;
}
Everything looks good if you have widescreen, but if you resize a window a little, the logo and text will go under each other, what is the best way to fix this? I would be happy if it would just stay where they are and you would have to scroll (left and right), or is there any better way to fix this? I'm sure the header would look bad if you would be viewing it on a mobile too (portrait).
What i wanted to do is:
Text (image) should be in the center of the header
Logo should be a little to the left of the text (image) (like 200px to the left of the logo)
Facebook logo should be on the right
Basically, you want the logo between the left corner and the text image. To achieve perfect symmetry, you need to change your markup.
Change the html to this :
<div id="logo">
<img src="img/logo.png" height="80" width="214"></img>
<img src="img/Napis.png" height="80" width="448"></img>
<div id="FB_GPlus_logo">
<a href="http://www.facebook.com/5ekdoo" target="_blank">
<img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
</a>
</div>
</div>
Now select all the elements inside the #logo div and make them all float left and with a proportional width
#logo > a, FB_GPLUS_logo {
float : left;
width:33%;
min-height:80px;
text-align:center;
}
This should create three divs with a width of 33% thereby almost occupying the header and all the content in the divs will be center aligned. As a last point, because all the elements are floats you may need to apply this '.clearfix' class to the parent div in which all theses three divs reside.
.clearfix:after {
content :'';
clear:both;
display:block;
}