So I'm having a mental block as to why the image is not decreasing when the screen decreases in size. I'm creating a signature block, and I want the image to decrease / be responsive, so the entire wrapper will not stack to two columns; I'd like it to be just one.
I know making the image have a max-width 100% and an auto height should make it responsive, but it's not making it such. I thought giving a width to the wrapper and the div parenting it would do, but it hasn't.
.wrapper {
max-width: 100%;
height: auto;
}
.leftSide {
float: left;
padding: 20px 0;
}
img {
max-width: 100%;
height: auto;
}
img,
.rightSide {
margin: 20px;
}
.rightSide {
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="leftSide">
<img src="https://dummyimage.com/200x150/000/fff" alt="">
</div>`enter code here`
<div class="rightSide">
<p><span>First Last</span> Company Title</p>
<hr>
<p><span>P</span> (123)456-7890 <span>E</span> 123#abccompany.com</p>
<p><span>URL</span> www.company.com</p>
</div>
</div>
Codepen view here
I'd like for it to scale down the image as the screen sizes decreases so the signature / body / sides doesn't have to stack. Please assist if possible. Thanks!
try using view-port units instead of percent.
here's a reference, take a look:
https://www.w3schools.com/cssref/css_units.asp
Related
I am making card design in cakephp,
but when it comes to show longer image than 600px width,
It extended insanely!!!
I am using placeholder or dummyimage but it has no problem.
Why this is happening? What should I do to show smaller images?
html inline width height constraint did not work.
<div class="cards">
<div class="image">
<img src="https://dummyimage.com/600x150/000/fff" >
</div>
</div>
* {
margin: 0;
padding: 0;
}
.cards {
width: 30%;
background: #999;
}
.image img {
width: 100%;
}
.title {
text-align: center;
}
.des {
text-align: center;
}
You've set your image to take 100% of the container size, which is 30% of the screen width. Set
.image img {
width: auto;
}
Important, if your screen is too small, then the background will only cover a portion of the image, since you set the card to be 30% of the size of the screen, but the image is being automatically sized. Try adding max-width: 100%; to the image CSS.
Desired Outcome:
Further Details:
Right now I am setting the Div height based on estimates (ie. 10% for search bar, 60% for middle and 30% for bottom) and set the thumbnail size to fit well on my Samsung Phone. The problem is that on different phones, the width is different and Div3 ends up with large borders. To complicate matters, Div2 can scroll up/down (minor problem) but Div3 can scroll left/right (moderate problem).
All thumbnail images are guaranteed to be 16:9 (I believe) as they are obtained from here https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg
I'm having conceptual issues trying to size a div (Div3) based on the height generated when an image is stretched the (more or less) the screen width)
Question:
How can I get the three below divs, while allowing for (1) vertical scrolling in Div2 and (2) horizontal scrolling in Div3
Code:
JSFiddle code. Try on iPhone X, it looks weird
Important sections:
#search_bar {
width: 100%;
height: 10%;
border: 0px;
float: right;
padding:0px;
position: relative;
background-color:red;
}
#search_results {
width: 100%;
height: 58%;
padding:4px;
float: right;
overflow:auto;
background-color:green;
}
#playlist_reel {
width: 100%;
height: 32%;
padding:4px;
clear: both;
overflow-x: auto;
white-space: nowrap;
background-color:blue;
}
I went off the diagrams you included and tried to replicate a simple version of it.
Use flexbox for column layout
Have #search_results take up as much space as possible
Have #search_barand #playlist_reel take up only the space they occupy (totally adjustable)
Use a background-image for #search_results so the element is always covered.
Use a static img in .bottom so that it takes up actual DOM space
As for scrolling, the requirement feels a little broad at the time I am posting this. Maybe this demo will get you close enough to experiment with scrolling on your own.
Note: This demo is more easily viewed in either "full page" mode (here in SO) or in the jsFiddle.
html, body { margin: 0; }
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 380px;
max-width: 100%;
margin: 0 auto;
}
#search_bar [type=search] {
width: 100%;
padding: 1em;
font-size: 1.25rem;
}
#search_results {
flex-grow: 1;
background-image: url('http://placekitten.com/400/500');
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="search_bar">
<input placeholder="Search" type="search">
</div>
<div id="search_results"></div>
<div id="playlist_reel">
<img src="http://placekitten.com/400/50" alt="">
</div>
</div>
jsFiddle
like let's say you have an image
<img class="testImage" src="test.png"/>
then there's also a section supposed to always follow the height of the image.
I know these examples below would never work, but just to give an idea, if something like this is possible?
height: .testImage;
height: calc(0 + .testImage);
The reaosn I wanna do this is because I am working on something in wordpress where I've put in an image and then there's some content next to it. https://i.gyazo.com/d85b9d8a5384829589b715c2c36fb059.png This looks fine when the screen width is normal. However, when it becomes smaller then the image becomes smaller as well, because it's responsive. The content does not become smaller though. https://i.gyazo.com/0af7d841c695912cda3bd266174238e1.png
For it to match the image 100% I would have to figure out exactly how the image is styled for every screen size. So I am wondering if I can just get the content block to follow the images height?
You should use flex property for this. In this example image width is fixed but you can also put it in % or em
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
.container{
width: 100%;
display:flex;
flex-direction:row;
}
.container img{
display:block;
margin: 0 auto;
width:200px;
flex-shrink:0;
}
.icontainer
{
margin:0;
background-color:red;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
}
<div class="container">
<img src="http://images.fineartamerica.com/images-medium-large-5/sunflower-abstract-by-nature-square-lee-craig.jpg"/>
<div class="icontainer">
<p>content</p>
</div>
</div>
Use same css class to both images
img 1
img 2
.imageClass{
height: 100px;
}
<img class="imageClass" src="https://s-media-cache-ak0.pinimg.com/originals/bd/8c/24/bd8c241fb4c6b19a48668ae993cd0a34.jpg" >
<img class="imageClass" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTrgEmBoOkIN4gekFDarSmiHlv83AK_7UuQW9SDBJYUM-qhb9AK" >
So frustrated with this issue. I'm not sure what the issue is. I'm trying to get this background on this website to stretch the full width of the background. The issue comes into play when the window size is reduced. Below is the code.
HTML
<section id='slide1' class='slide slide-odd'>
<div class="postWid">
<div class='row'>
<div class='col-lg-7'></div>
<div class='col-lg-5'>
</div>
</div>
</div>
</section>
CSS
#slide1,
#slide2,
#slide3,
#slide4,
#slide5,
#slide6,
#slide7,
#slide8,
#slide9,
#slide10,
#slide11,
#slide12,
#slide13,
#slide14,
#slide15,
#slide16 {
height: 480px;
}
.slide-odd {
background: url('../img/green.png');
background-color:#408573;
color:#ffffff;
}
.slide-even {
background: url('../img/white.png');
background-color:#f4f0e7;
color:#000000;
}
.slide {
padding: 144px 3%;
}
.postWid {
width: 1240px;
margin:0 auto;
}
I think it has to do with .postWid I set it to min and max widths but it isn't responding to the min width. So I had to set the width to 1240px;
a) why not specifying your #slides in the .slide class?
b) You can't get relative behaviour with absolute widths. Use relative widths.
example:
.postWid {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
How can I properly position the 'portfolio' section so that it doesn't go behind 'contact' section and that it stretches and shrinks depending on the size of the screen (just like the photo backgrounds)??? Can it be done with CSS and percantages only??? I tried many different combinations but w/o success.
The height of each section is always 100%. So is the width.
http://jsfiddle.net/zwwve/9/
<section id="home" class="photobg">
<div class="inner">
<div class="copy">
<h1>Home</h1>
<p>Some text here!</p>
</div>
</div>
</section>
Here is a rough idea: http://jsfiddle.net/derekstory/zwwve/17/
For unhiding the portfolio section, put a div wrap around it. No CSS for the wrap required.
For the scaling, you will want to remove the gallery width. Maybe put a min-width.
.gallery {
min-width: 500px;
margin-left: auto;
margin-right: auto;
}
For the portfolio hovers, you can also give them a percentage and a min-width.
.project {
display: inline;
float: left;
height: auto;
position: relative;
width: 20%;
min-width: 120px;
margin-top: 40px;
margin-left: 40px;
margin-right: 20px;
}
Its rough, but the basic idea.
You had a fixed width for the .gallery class which I changed to 100%, now the projects fall underneath each other as the screen size decreases.
I also changed the position and bottom of the contact div so it can be at the bottom.
JSFIDDLE
Added/Changed CSS:
.gallery {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#contact{
position: relative;
top: 1000px;
}