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>
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%;
}
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.
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
I am creating a simple wordpress theme for this website and style.css applied on this site.
i want all images to be responsive. I tried this code.
img {
max-width: 100%;
height: auto;
}
It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).
How do i fix this?
Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.
Instead of max-width: 100%; try the following:
img {
max-width: 200px; /* Change this to what your logo is by its width */
width: 100%;
height: auto;
}
You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.
EDIT: For sitewide images this of course does not work, since they all don't have the same width.
For image tag write this css
img {
max-width: 100%;
height: auto;
width:100%;
}
And if you are using bootstrap in your theme then write this css
img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}
You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
And the CSS:
.image-wrap {
max-width: 600px;
width: 30%;
margin: 2% 0 0 2%;
overflow: hidden;
position: relative;
display: inline;
float: left; }
img {
width: 100%;
height: auto; }
#media only screen and (max-width: 767px) {
.image-wrap {
width: 96%;
max-width: 400px;
display: block;
float: none;
margin: 0 auto;
margin-top: 2%;}
}
I have 2 divs that I'm setting up to be next to each other in the desktop version of my site, and on the mobile / tablet version, I would like the right div to be on top and the left div to be underneath, with both of them centered inside their parent div. I have it set up like this:
<div id="right-top">right & top</div>
<div id="left-top">left & bottom</div>
And my CSS is like this:
#right-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #ddd;
margin: 0px auto;
}
#left-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #666;
margin: 0px auto;
}
They're floated right so that I can have the right div on top in smaller browser windows. How do I get them to be centered on smaller browsers, rather than aligned to the right side?
I would do it using mobile first design
That means defining how it will look first on small devices and progressively adding more rules for bigger screens
<div class="my-div" id="right-top">right & top</div>
<div class="my-div" id="left-top">left & bottom</div>
So we define the common rules (most of the stuff) between the 2 divs to a class (.my-div), the specifics to ids (#right-top, and #left-top)
And set a breakpoint in 860px (430px times 2 for each div), and only then, float the divs to the right.
.my-div{
width: 430px;
height: 300px;
max-width: 100%;
display: block;
margin: 0 auto;
}
#right-top {
background-color: #ddd;
}
#left-top {
background-color: #666;
}
#media only screen and (min-width: 860px) {
.my-div{
float: right;
}
}
You can test it here
You can use #media queries for responsive layout.
For eg:
#media (max-width: 769px){
#right-top,#left-top{
float: none;/*unset the floated div*/
}
}
demo