Good day,
NO matter what i try or what tutorial i use, the card size images are not the same.
A user uploads a image and then the cards needs to scale the image up or down but the total card size across should stay the same width and height.
one image is 2956 x 1965
and the second image is 1024 x 683
the below code looks right until you use different images sizes.
i don't want to upload 100's of images with the same sizes
Below is a screenshot and the code
[enter image description here][1]
<style>
.column_main {
float: left;
width: 25%;
padding: 10px;
height: 900px; /* Should be removed. Only for demonstration */
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
.column_main {
width: 100%;
height: 100%;
}
}
div.polaroid {
width:100%;
overflow: hidden;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="column">
<div class="polaroid">
<img src="img_nature2.jpg" alt="5 Terre" style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
<div class="column">
<div class="polaroid">
<img src="img_nature1.jpg" alt="5 Terre"style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to give a default css to the img or its parent div element
.card{
width: 200px;
height: 200px;
border: black solid 1px; //Look clearly with border :)
}
.card-image{
width:100%;
height:150px; //Whatever you want for only image
object-fit: cover; // it is important for scale of image
}
<div class="card">
<img src="https://theimageconference.org/wp-content/uploads/2020/04/vancouver_image_conference_3-scaled.jpg" class="card-image">
<p>Card Title</p>
</div>
Related
.game__feature__block {
transition: 1s;
flex: 1;
padding: 15px;
border: 1px solid #e40e0e;
background-position: 50% 0%;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607;
text-align: center;
}
.game__feature__block:hover{
flex: 2;
}
.container {
width: 100%;
max-width: 1480px;
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
}
<html>
<div class="container" style="display:flex;">
<div class="game__feature__block" >
<img src="https://i.imgur.com/Qz2XMxk.png">
<h3 class="game__feature__title">RAIDS</h3>
<p>chambers of xeric.</p>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">RAIDS2</h3>
<p>theatre of blood osrs.</p>
</div>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">TRADINGPOST</h3>
<p>Where you can sell or buy your item to another players.</p>
</div>
</div>
<div class="game__feature__block">
<img src="https://i.imgur.com/Qz2XMxk.png">
<div>
<h3 class="game__feature__title">Presets</h3>
<p>Save and fast Equipment Your Item.</p>
</div>
</div>
</div>
</html>
So I would like to keep the images and text in from of the img frozen. And the first element to be flexed: 2 as default and flex back to 1 when other elements are hovered. IDK is there is a better they then flex but this could work fine I think. Doesnt seem to work on this snippet but on separate files it works.
Your code is almost good. Two things you need to add:
.game__feature__block {
overflow: hidden;
}
And
.container:not(:hover) .game__feature__block:first-child {
flex: 2;
}
I have a fixed position element which I am using Midnight.js (https://aerolab.github.io/midnight.js/) to change the colour of depending on the elements which scroll behind it.
The idea is that the contrast is always high enough for the navigational elements to be visible/useable.
I'm seeing a strange lag behind the element which triggers the change between states on scroll, which gets smaller the further the page is scrolled (or, the closer to bottom of the viewport the dividing line is). it's best communicated by these images – the element in question is the navigational bar on the left:
I just can't figure out why this is happening. Is something in my CSS clashing with Midnight's functions?
Full version demonstrating issue: https://hba.matmartin.studio/about/
HTML (with non-pertinent elements removed):
<div class="pagewrap">
<div class="triggers">
<div class="nav-trigger-wrap">
<div class="nav-trigger">
<div class="nav-trigger-line" id="tl-top"></div>
<div class="nav-trigger-line" id="tl-bot"></div>
</div>
</div>
<div class="search-trigger">
<div class="st-close">
<!-- svg code -->
<div class="search-trigger-line" id="tl-top"></div>
<div class="search-trigger-line" id="tl-bot"></div>
</div>
</div>
<div class="sep-line-v"></div>
<div class="twitter-trigger">
<a href="#" target="_blank">
<!-- svg code -->
</a>
</div>
</div>
<div class="pagecontent">
<div class="width" id="page-lander">
<!-- content -->
</div>
<div class="fullwidth" data-midnight="white">
<!-- more content -->
</div>
<div class="fullwidth">
<!-- even more content -->
</div>
</div>
</div>
CSS (height and position etc is added inline by the jQuery plugin)
.pagewrap {
width: 100%;
z-index: 10;
min-height: 100vh;
}
.triggers,
.midnightHeader,
.midnightInner {
width: 24px;
padding: 37px 0 0 32px;
box-sizing: content-box;
z-index: 10002;
}
.triggers .nav-trigger-wrap {
height: 12px;
}
.triggers .search-trigger {
width: 22px;
height: auto;
min-height: 22px;
padding: 16px 0 32px 0;
margin: 0 0 0 1px;
}
.triggers .sep-line-v {
width: 1px;
height: 77vh;
margin: 0 10.5px;
background-color: #F4F4F4;
}
.triggers .twitter-trigger {
width: 22px;
height: auto;
padding: 28px 0 0 0;
margin: 0 0 0 1px;
}
#page-lander {
padding: 88px 0;
}
.width {
width: 78%;
margin: 0 auto 64px;
}
.fullwidth {
width: 100%;
padding: 72px calc(14% + 24px);
background-color: #F4F4F4;
color: #383838;
}
.midnightHeader.white .sep-line-v,
.midnightHeader.white .nav-trigger-line {
background-color: #383838;
}
JS:
$('div.triggers').midnight();
What I am trying to do:
I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):
But when the web page reaches the minimum width, it looks like this:
However, I would like it to look something like this when the web page has been decreased to the minimum width:
Problem/ What I tried:
So, I am have trouble with two things.
Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.
Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.
I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.
I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.
What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.
Code:
Here is my HTML:
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
Here is my CSS:
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
You can do this with bootstrap grid and media queries DEMO
#media(min-width: 768px) {
.custom-row p {
text-align: right;
}
}
#media(max-width: 768px) {
.custom-row {
text-align: center;
}
}
something i sorted out that can then be worked on.
http://codepen.io/simondavies/pen/jqjgxL
HTML
<footer>
<div class="footer-social-wrapper">
<div class="social-wrapper">
<div class="social-icons"><div class="facebook"></div></div>
<div class="social-icons"><div class="twitter"></div></div>
<div class="social-icons"><div class="youtube"></div></div>
</div>
</div>
<div class="footer-copy">
<p>© 2016 Company Name. All Rights Reserved.</p>
</div>
</footer>
CSS:
body {margin:0;padding:0;}
footer,
.social-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
height: 50px;
}
footer:before,
.social-wrapper:before,
footer:after,
.social-wrapper:after { content: " "; display: table;}
footer:after,
.social-wrapper:after {clear: both;}
.footer-social-wrapper {
margin:0;
padding: 0;
position: relative;
float: left;
width: 30%;
}
.footer-copy {
margin:0;
padding:0;
position: relative;
float: left;
width: 70%;
height: 50px;
}
.footer-copy {
text-align: right;
}
.social-wrapper .social-icons {
margin: 0px;
position: relative;
float: left;
width: 33.333%;
height: auto;
}
.social-wrapper .social-icons .facebook {
margin: 0 auto;
background:blue;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .twitter {
margin: 0 auto;
background: red;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .youtube {
margin: 0 auto;
background: yellow;
width: 40px;
height: 40px;
}
#media(max-width:700px){
.footer-social-wrapper,
.footer-copy {
margin: 0 auto;
width: 100%;
text-align: center;
}
}
without a frame work like bootstrap etc.
Inside jumbotron, create another element contentWrapper and put contents inside then add a media query for it. You need to set width and margin: auto to make it centered.
Try resizing the window width to below 800 pixels, and you will see the contents are aligned center.
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
#media (max-width: 800px) {
.contentWrapper{
width: 400px;
margin: auto;
}
}
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<div class="contentWrapper">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
In Bootstrap 4 you can just use the responsive alignment classes, something like text-xs-center text-sm-left, Also your code is highly repetitive, consider something like this:
#footerJumbotron img {
width: 30px;
height: 30px;
margin: 5px;
}
#footerFont {
color: white;
font-size: 10px;
}
#footerJumbotron {
background-color: black;
border-radius: 0 !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="grid">
<div class="row">
<div class="container-fluid jumbotron" id="footerJumbotron">
<div class="col-sm-6 text-sm-left">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
</div>
<div class="col-sm-6 text-sm-right">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.
<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/veyytd6u/
* no need to set a fixed height if your footer is going be dynamic (in mobile when there are 2 rows, the height must change so leave it automatic)
* consider escaping the & in HTML => &
I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):
I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:
Here is the HTML:
<div class="row">
<div class="col-md-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- this four times -->
<div class="col-lg-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
<!-- this four times end -->
</div>
</div>
</div>
My jQuery attempts
// news section fix height
// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);
// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)
// 25 is the margin (i know it, but ofcourse it can be set from DOM)
var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;
//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);
The result is ok BUT it's not responsive and it's a bug if the left side is too small.
try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>
Code is right now:
HTML:
<section class="sponsorSection">
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/logo4.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/logo5.jpg" class="sponsorpicture1"/>
</div>
</div>
</section>
CSS:
.sponsorSection{
width: 480px;
margin-top:30px;
border:2px solid rgba(0, 0, 0, .2);
border-radius: 5px;
}
.sponsorImageRow{
height: 50px;
}
.sponsorImageColumn{
width : 50% ;
display: inline;
}
.sponsorpicture1{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
.sponsorpicture2{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
Though it does not look correct:
I'm not sure, if I understood your requested positioning correctly, but if I look at your code, you want your image to be horizontal centered? Since image is an inline element per default the margin:0 auto will not be considered. Try something like this:
/* keep it as a block element, not inline */
.sponsorImageColumn {
width : 50% ;
float:left;
display: block;
}
/* and image also as a block element */
.sponsorSection img {
display:block;
}
I put together a small fiddle to demonstrate.
For more complex positioning you could have a look at the css-syntax display: table, table-row and so on, to emulate a classic table with other html elements.
Make the following change to your CSS -
.sponsorImageColumn{
width : 50% ;
float : left; /*remove display property and use float as you want to set the width*/
}
hope this solves your query