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.
Related
I need to reduce the size of the box for mobile devices and cannot remember how to do so.
Currently, everything displays right on a website but on mobile it does not reflect and the box overfills the container
<div class="box">
<img src="img/devban.png" alt="logo"/>
</div>
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
/* width: 100%; */
width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
height: 100%;
}
you can use media query for it
inside your styles
#media only screen and (max-width: 600px) {
.box {
width: 400px;
}
.img {
width: 80%; // change the values according to your requirement
}
}
for more refer
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
Just remove the width from the .box. The default of the width property is "auto", this means a block-level element, such as a div, will fill up the available space. I would change the width to max-width so the div can shrink (for mobile) but will not expand beyond 800px (for desktop). No need for the extra complexity of a media-query then.
Also you probably want to remove the height property on the img too. Height auto means it will preserve the aspect ratio.
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
max-width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
}
For example, how would you create an image that is centered and takes up 100% of the page on mobile, but is left-justified and takes up no more than half the page on desktop?
Here's my current code:
.img{
text-align: center;
max-width: 100%;
height: auto;
}
#media (min-width: 480px) {
.img {
text-align: left;
max-width: 50%;
}
Likewise, how would you code a block of text that is below the image on mobile, but wraps around the image on desktop?
Heres a simple solution using float to put the text next to the image.
You can add further styling to the text to get it how you want it.
Also, text-align cannot be added to an <img> but can be to a block element that holds and image, which will align it within the block. For example, I have created an img-container and aligned the image within this.
.img-container {
text-align: center;
max-width: 100%;
}
.img {
width: 100%;
height: auto;
}
#media (min-width: 480px) {
.img-container {
max-width: 50%;
float: left;
}
.text {
max-width: 50%;
float: left;
}
}
<div class="img-container">
<img class="img" src="https://placekitten.com/500/500">
</div>
<p class="text">Some text below image on mobile and next to image on desktop.</p>
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
I'm trying to build a page that can run at full screen but as it scales down the divs drop and fit the content and allow scrolling. At fullscreen I'd like one big box with three little boxes on the bottom. The content in the big box changes dynamically so the div needs to be able to scale on a lower resolution device. Also, on a lower resolution device I would like the bottom three boxes to stack on top of one another and all be a fixed width to fit all of their contents. My main issue is text spilling out of the big box and being unreadable on smaller screens.
Here is the HTML:
<body>
<div class="container">
<div class="content">
</div>
</div>
<div class="footer">
<div class="widget1">
<div class="widget_contents">
</div>
</div>
<div class="widget2">
<div class="widget_contents">
</div>
</div>
<div class="widget3">
<div class="widget_contents">
</div>
</div>
</div>
</body>
Here is the CSS:
*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}
.container {
height: 80%;
width: 100%;
padding: 1em;
}
.content {
height: 100%;
width: 100%;
background: rgba(150, 50, 50, 1);
}
.footer {
height: 20%;
width: 100%;
padding-right: 1em;
}
.widget1 {
width: 55%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget2 {
width: 25%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget3 {
width: 20%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget_contents {
height: 100%;
background: rgba(55, 150, 55, 1);
}
Here is a jdfiddles of my basic layout: http://jsfiddle.net/kzoqwz9n/
Thanks!
For allow scrolling, you just need to apply 'overflow:auto;' to your block.
For stack bottom blocks you need to use media queries, something like :
#media screen and (max-width: 600px)
{
.widget1,.widget2,.widget3 {
padding-left: 1em;
float:none;
width: auto;
}
}
This exemple will stack your box when the screen is smaller than 600px.
UPDATE :
For the scrolling thing, we need to apply some changes :
.container {
min-height: 80%;
margin: 1em 1em 0 1em;
background: rgba(150, 50, 50, 1);
}
We delete the style for .content and add 'padding-top: 1em;' to .footer
Exemple here : http://jsfiddle.net/kzoqwz9n/3/
It is what you want to do ? (try to add/remove content)
You basically need media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes for switching between row and column layout
My main issue is text spilling out of the big box and being unreadable on smaller screens.
set the width to width: fit-content; (+ vendor prefixes) to allow the box itself instead of just the text content to spill out of the parent container
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;
}