I'm new to HTML and CCS and I'm trying to create a little personal website. I made up a design in Sketch and I've managed to successfully reproduce it on HTML and CSS. I have three big icons at the bottom that send you to different pages (Twitter, Instagram and Tumblr). On a big screen, the website looks great. However, when loading it on a small screen, it looks bad. I want the three icons to stack each one on top of another. Here's a picture of what it looks like now:
What I would like is that each icon is on top of the other, so it would be Twitter, below Instagram, and under that, Tumblr. I've tried many things, like setting up columns and I've looked many tutorials on the internet, but I haven't really found a solution.
Thanks!
EDIT: Code portions
HTML
<div class="social-container">
<div class="twitter">
<img src="images/Twitter Logo.png" alt="Twitter"/>
</div>
<div class="instagram">
<img src="images/Instagram Logo.png" alt="Instagram"/>
</div>
<div class="tumblr">
<img src="images/Tumblr Logo.png" alt="Tumblr"/>
</div>
CSS
.social-container {
margin-top: 100px;
display: block;
width: 60%;
margin: 8px auto; padding: 16px;
text-align: center;
-webkit-columns: 3 33%;
-moz-columns: 3 33%;
columns: 3 33%;
}
#media (max-width: 768px) {
.social-container {
-moz-columns: 1 100%;
-webkit-columns: 1 100%;
columns: 1 100%;
display: inline;
margin: 8px auto;
}
You could do that using media queries. Just define a style for smaller screens. Usually, the size for phone-sized screens is considered to be 768px.
For example, if you are using img for your icons, then you could simply change the display for smaller screens:
Demo Fiddle: http://jsfiddle.net/abhitalks/rvjmk90e/
Demo Snippet:
div.jumbo {
background-color: #eee;
width: 60%;
margin: 8px auto; padding: 16px;
text-align: center;
}
#media (max-width: 768px) {
img {
display: block;
margin: 8px auto;
}
}
<div class="jumbo">
<h2>Hola</h2>
<img src="http://placehold.it/120x120/&text=tw" />
<img src="http://placehold.it/120x120/&text=Ig" />
<img src="http://placehold.it/120x120/&text=tm" />
</div>
A better way for responsive web is not to use <img /> but insert images as the background background-image.
With media query set width: 100% and everything will be fine. If they have 100%, put together under himself.
Related
In my jquery Mobile app, I've got a page that has a header and footer and the main content is 4 images arranged 2x2. I chose to create my own 2x2 grid in a div since I couldn't get JM grid to work. The code for the main content looks like this:
<div class="container">
<div class="image">
<a href="#intro">
<img src="img/Intro1.png" />
</a>
</div>
<div class="image">
<a href="#putting">
<img src="img/Putting1.png" />
</a>
</div>
<div class="image">
<a href="#chipping">
<img src="img/Chipping1.png" />
</a>
</div>
<div class="image">
<a href="#sand">
<img src="img/SandPlay1.png" />
</a>
</div>
</div>
The page css that arranges everything looks like this:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .image {
width: 50%;
}
.container img {
width: calc(100% - (5px * 2));
margin: 5px;
}
This works fine on an iPhone, but the images are too large on an iPad. On the iPad the images are the full width which makes them go beyond the bottom edge of the screen. I've looked all over for a solution to this and finally decided to come here. Thanks in advance for any help/guidance.
What you'll want to use is media queries. For the issue with the ipad you can set the media queries so that if your page is being viewed on a tablet/ipad size you can specify the size of the images and anything else. Take a look at this example:
.sample {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.sample {
font-size: 3.5rem;
margin: auto;
width: 50%;
padding-bottom: 100px;
}
}
In the above you can see the class of sample (both outside and inside the media query) has different css styles based on the screen size.
Take a look at this for further info: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am creating an image gallery populated with a dynamic sized amount of images, the PHP and HTML are as follows;
<?php
$dirname = "Pictures/";
?>
<ul class="gallery">
<?php
$images = glob("" . $dirname . "*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE);
foreach ($images as $image)
{
$File = pathinfo($image);
?>
<li class="container">
<img src="<?php echo $url.$image; ?>" alt="">
</li>
<?php
}
?>
</ul>
The css I have is as follows;
.gallery
{
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 5px;
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
align-content: stretch;
list-style: none;
}
.gallery li
{
width: 100% !important;
height: auto !important;
margin-bottom:5px!important;
border:1px solid #dfe1e5;
}
.container img
{
width: 100% !important;
height: auto !important;
}
This code I have so far doesn't allow me to randomly display the images while justifying the bottom row so the whole gallery is more rectangular, as follows;
Justified Random Rows
Also, this code is in columns, what I would like is a more random flow instead of breaking things up into columns.
Can someone give some advice of a better way to achieve the goal of a random sized self aligning justified image gallery using CSS and HTML only.
I created a JSFiddle https://jsfiddle.net/awhe61kg/ for those who request.
As a side note, what I would like to achieve at the least is like the unitegallery theme https://unitegallery.net/index.php?page=tiles-justified, but without the use of Javascript if at all possible. The reason I don't want to use this gallery is because I've tried it and it is glitchy. Although it is a beautiful design which I would like to replicate in CSS and HTML.
** FIXED ISSUE BELOW **
I can nearly achieve the unitegallery behavior with CSS flex boxes alone as follows;
.gallery
{
min-width:100%;
max-width:100%;
list-style: none;
font-size:0;
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items: stretch;
}
.gallery li
{
flex-direction: row;
flex:20 20 auto;
width: auto !important;
height:200px;
max-width:400px; <-----------causes the problem, remove and its fixed
margin-bottom:5px!important;
border:1px solid #dfe1e5;
}
.container img
{
min-width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}
Although I'm having an issue currently with the top row not stretching correctly at certain widths in responsive design mode.
** FIXED **
Here is a JSFiddle with the flex box image gallery and the element which was causing the problem commented out https://jsfiddle.net/ag9s2qdt/.
The page you link to (here) just uses rows instead of columns. If you want justified rows of images with just HTML and CSS, you can do this:
.justified {
text-align: justify;
}
.justified:after {
content: "";
display: inline-block;
width: 100%;
}
.justified img {
height: 100px;
display: inline-block;
}
<div class="justified">
<img src="https://cdn.pixabay.com/photo/2016/11/19/18/57/godafoss-1840758_1280.jpg" />
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="">
<img src="https://i.picsum.photos/id/1013/4256/2832.jpg" alt="">
<img src="https://i.picsum.photos/id/1009/5000/7502.jpg" alt="">
<img src="https://i.picsum.photos/id/1006/3000/2000.jpg" alt="">
<img src="https://i.picsum.photos/id/1005/5760/3840.jpg" alt="">
<img src="https://i.picsum.photos/id/1003/1181/1772.jpg" alt="">
<img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
<img src="https://i.picsum.photos/id/1000/5626/3635.jpg" alt="">
<img src="https://i.picsum.photos/id/10/2500/1667.jpg" alt="">
<img src="https://i.picsum.photos/id/100/2500/1656.jpg" alt="">
</div>
Of course, the gaps between each image can be wide, and you're responsible for making sure there isn't a weird amount of images on the last row. JavaScript would help tremendously with the calculations for actually getting a good result here, but to each his own.
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I'm building a site with coupon codes and so far, I'm satisfied with how it look in desktop but it looks horrible when I view it in my smartphone. What I want to achieve is for this div to display 100% wide in smartphone while remaining 70% in desktop view. Here is the code I used:
<div class="couponr" style="width: 80%; padding: 10px; text-align: center; border: 5px dashed red; margin:auto ">
<h3>
<span style="background-color:#ffffff;"><strong>HELLOCAVITE</strong></span>
</h3>
<hr />
<h3>
P100 Off on 5 Rides!
</h3>
Copy the coupon above at checkout to redeem P100 off from Uber.
</div>
Check out this sample output here It looks okay in desktop but ugly in smaller screens. Appreciate your help!
you need grid based layout to work on, choose how your content looks on different screens. You can use bootstrap or foundation for that or you can create your own grid based layout. Learn more about responsive web design.
Erase the complete style attribute from the .couponr tag and write something like this into your CSS stylesheet:
.couponr {
width: 70%;
padding: 10px;
text-align: center;
border: 5px dashed red;
margin:auto;
}
#media screen and (max-width: 480px) {
.couponr {
width: 100%;
}
}
P.S.: The .coupnr tag would then simply be
<div class="couponr">
(i.e. no style attribute)
Nothing just remove you width from your couponr div you will get responsive auto width.
At your site.
<div class="couponr" style="padding: 10px; text-align: center; border: 5px dashed red; margin:auto ">
<h3>
<span style="background-color:#ffffff;"><strong>HELLOCAVITE</strong></span>
</h3>
<hr />
<h3>
P100 Off on 5 Rides!
</h3>
Copy the coupon above at checkout to redeem P100 off from Uber.
</div>
I have a Wordpress site. I have altered the footer to contain five divs with images in them.
This is the html code for the footer:
<footer class="site-footer">
<div class="table">
<div class="logo-gallery">
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div><!-- .logo -->
</div><!-- .logo-gallery -->
</div><!-- .table -->
</footer>
For css I came up with this:
/* Footer */
.site-footer {
background-color: #e8e5ce;
/*min-height: 180px;*/
}
.site-footer .table {
display: table;
width: 80%;
margin: 0 auto;
}
.site-footer .logo-gallery {
display: table-row;
}
.site-footer .logo {
display: table-cell;
}
On a desktop computer the images now show as I would like them to:
1. they take up to 80% of the width (so that they are closer to eachother)
2. they are (as a group) placed at the center of the screen horizontally.
I want to make the images fit a smaller screen (a cell phone or tablet) - right now I get a horizontal scroll bar when I try to downsize the browser window and the images are beyong the right edge of the window (I haven't checked this code with a phone yet).
On the smaller screen I would like them either to get smaller to fit the width (all five) or appear underneath eachother (with the background color stretched underneath).
I also have a second version of css. Here, the problem is that the images clump up when downsizing the browser window (and also on the phone: check here: http://npozp.pl/)
/* Footer */
.site-footer {
background-color: #e8e5ce;
min-height: 180px;
}
.site-footer .logo-gallery {
margin: auto;
width: 70%;
}
.site-footer .logo {
float: left;
width: 20%;
height: auto;
padding: 30px 15px;
}
I am looking for a way to do this, it can be one of the above codes fix or please suggest an approach that I could take.
Thanks for reading! :-)
Please consider using media queries so that you can manipulate your layout using the pixel size of the device.
Your css adjustments should look like:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.site-footer .logo {
width: 100%;
}
}
As you can see the mix and max device width values can be changed and you can add multiple media queries to get the best out of your layout.