I'm using Bootstrap and I have the following code.
<div class="row">
<div class="col-sm-12">
<p style="margin-top:13px">
<img style="width: 200px; height: 78px;" src="/PATH_TO_IMAGE/unnamed%20copy%203.jpg" alt="">Praesent vehicula libero sed nisl dapibus aliquet. Ut ultricies nisi tempus, blandit nisl ut, tincidunt diam. Pellentesque non sapien sed massa mattis tristique. Nullam posuere purus elit. Vivamus sollicitudin placerat orci, id sodales sapien aliquam at. Cras vitae pretium dolor. Proin eu lectus id quam volutpat sollicitudin ut in orci.
</p>
</div>
</div>
I'd like to write some CSS so that the image centers in the container above the text when being viewed on mobile.
The problem is I can't get it in the center.
#media all and (max-width:480px) {
img {display:block;margin:0 auto;}
}
adjust the mediaquery to your will.. i'm assuming "mobile" has a max width of 480px, but it's not necessary true, that's up to you.
fiddle: http://jsfiddle.net/4y8tN/
the img tag is an inline element so you need to overwrite his natural behaviour on mobile with a mediaquery and center it with display:block;margin:0 auto;
add this styles to img tag
margin:0 auto;
Related
This seems like a simple question, but I couldn't find anything here/with search engines.
Let's first define what I mean by "same": I mean that if I put a ruler (the plastic one) next to the screen, the box would always, in different zoom levels, be the same width in centimeters (whatever that would be).
Let's also say that I'm talking about desktop browsers, since I don't want to complicate things by taking mobile into account. Also the browser should be wide enough to let there be some extra space for zooming.
Here is the box:
https://jsfiddle.net/a4be6ov5/
<div></div>
div {
border: solid 1px #000;
width: 800px;
height: 200px;
margin: auto;
}
Now, if you zoom in/out, the box width will change. The browser's Developer Tools will always show that the width is 200px, because the way this zoom thing works. But what I would actually want, is that I would want it to match the initial width compared to that ruler of ours.
I can partly do that with viewport units, but I couldn't figure out to do it automatically by calculating something. I could only do it by manually defining all the steps at which to change the box width. This turns out to be cumbersome and there are too many steps to do it at. For example I could do this:
#media screen and (min-width: 1500px) {
div {
width: 53vw
}
}
... not very easy.
How to do this automatically for all the screen widths and zoom levels?
What about having a slider on your page which alters the font size of your body element (or selected elements)?
document.querySelector('input').addEventListener("input", evt => {
document.querySelector('.body').style.fontSize = evt.target.value + 'px'
})
.a, .b {
background-color: cyan;
width: 250px;
height: 250px;
padding: 1em;
overflow: auto;
display: inline-block;
box-sizing: border-box;
}
.a {
background-color: cyan;
}
.b {
background-color: lime;
}
<p>
Smaller <input type="range" min="10" max="22" value="16"> Larger
</p>
<div class="body">
<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel aliquet mauris. Donec ipsum orci, ornare et tellus at, pretium aliquet nibh. Praesent quis tincidunt tortor. Integer ac varius nisi. Integer tempus varius justo. Quisque eget elementum sapien. Mauris id blandit arcu. Mauris dui erat, ultrices vitae ligula vitae, auctor cursus lacus.
</div>
<div class="b">
Cras venenatis, nunc in tempus dictum, justo augue imperdiet nisl, id rutrum eros quam sed arcu. Maecenas fringilla diam in erat venenatis, sed sagittis elit tincidunt. Vivamus vel varius ex, id scelerisque ante. Donec ultricies, urna at aliquet gravida, urna erat porta nibh, vel semper magna urna eu dolor. Nullam condimentum ex ligula, a fringilla tortor eleifend in. Vestibulum congue eget lectus vel congue. Praesent eget malesuada est. Nulla nec semper nunc. Mauris id nulla molestie, varius turpis ut, pulvinar tortor.
</div>
</div>
I want to inline two elements next to each other using flexbox. I want this to work exactly like display: inline works but for flexbox. How would you do this? What am I missing? :)
Demo: https://jsfiddle.net/24duh8wr/
If you want the text in the second item to wrap around the text it the first item, flexbox is not the way to achieve this. You have two options (remove display: flex from the container in both cases):
1) Just make them inline:
.item {
display: inline;
}
2) Float the first item left:
.item:first-child {
float: left;
}
It's not possible to do it with flexbox, if I understand your expectation http://take.ms/sLdMr . Flexbox is tool to build layout.
Please try display: inline-flex;
As explained in the commentary. Use flex-direction.
.flexbox {display: inline;}
.flexbox2{
display:flex;
flex-direction:row;
}
<div class="flexbox">
<div class="item">Date:</div>
<div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div>
</div>
<hr>
<div class="flexbox2">
<div class="item">Date:</div>
<div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div>
</div>
I'm working on an old website for someone and can't understand something with it's css:
I have a div the contains the page (article) content, which includes of course some images. in the top of the div there's another div, with extra information about the article. this second div is floated to the left.
<div class="entry-content">
<div class="lefttable"> //floated to the left
//some information here
</div>
//content here, including images
</div>
somehow the imgs inside the content are full sized even on the top of the page, and where they supposed to be beside the lefttable div, they jump beneath it.
here a print-screen: https://snag.gy/qFChjB.jpg
and the page itself: http://www.bayadaim.org.il/95b
Thanks,
Itamar
The parent of your image has
an inline style rule of width: 970px
wp-caption and aligncenter classes which mean:
width: 650px !important from style.css:1271
display: block; from style.css:1257.
All the above rules forbid your element from displaying inline, side by side with the floating content that precedes it.
You need to give the parent element of your image a width that compensates the width of the floating content responsively (you can do that using max-width and calc, provided that the page container has position:relative, which it does) and also you need to set it's display to either inline, inline-block or inline-flex. I recommend inline-block.
That's the theory.
In practice, for your very specific case, you also need to compensate for some padding/margin of the left-floating elements. Here's the CSS:
#post-34917 #attachment_34937 {
display: inline-block;
max-width: calc(100% - 220px);
position: relative;
margin-left: -20px;
}
#content .aligncenter>img {
width: 100%;
height: auto;
}
#media (max-width: 1023px) {
#post-34917 #attachment_34937 {
max-width: calc(100% - 170px);
}
}
You can give a try to max-width and calc():
.lefttable {
width:200px;
float:left;
}
.right {
overflow:hidden: /* to deal with floats in and out */;
}
.right img {
max-width:calc(100% - 200px); /* where 200px is the room used by lefttable ( mind borders, padding and margins) */
}
<div class="entry-content">
<div class="lefttable"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="right">
<img src="http://dummyimage.com/1200x200" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
Using some jQuery I found the way. It is not responsive, but neither this theme I'm editing - so it's good enough for me. And of course anyone who wants to develop it, is very welcome to do so.
CSS Part
Set width for all the images wrapper (wp-caption) to the width of the main content div where it is narrower, next to the floating div.
#content .wp-caption {
width: 66%;
}
jQuery Part
//make all images in posts 100% width except images next to the left table
jQuery(document).ready(function(){
var h = jQuery(".lefttable").height(); //get left table height
jQuery('.entry-content .wp-caption').each(function(){ //loop through all .wp-captions in the content
jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
var p = jQuery(this).position(); //get each .wp-caption position
var top = p.top; //top position
if(top > h){ //if .wp-caption is below .lefttable
jQuery(this).css("width", "initial") //change .wp-caption width to original (or anything you like)
}
});
});
That's it. I hope someone could benefit from that.
Itamar
I need some help with hiding my horizontal scrollbar and still able to scroll. I have used webkit but does not work in IE and firefox. I have seen a lot of help with vertical scrollbar, but does not work with horizontal. Any help?
Update:
I have created a JSFiddle to show my problem. I want to hide the horizontal scrollbar and still able to scroll without using
::-webkit-scrollbar {
display: none;
}
http://jsfiddle.net/o1xoh9w8/1/
Here is how you do it, I have tested this in Chrome, IE, Firefox, Opera, Safari(Windows) and Edge
<h1>You can scroll with mouse wheel</h1>
<div id="box">
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
h1{font-weight:bold;font-size:2em;} /* ignore only for header */
/* *********************** */
div#box{
height:200px;
width:300px;
overflow:hidden;
border:1px solid black;
padding: 10px;
}
div#content{
height:200px;
width:326px;
/*
* Uncomment to see scrollbar
width:300px;
*/
overflow:auto;
}
Here is a JSFiddle: http://jsfiddle.net/JoshMesser/VUSuZ/
Credits go to creator of the JsFiddle
EDIT:
For vertical it is just a matter of changing the height. What you are doing is you are just pushing the scroll bar outside of what user can see, so to them its not there, while in reality it is there hidden behind elements. Here is a JS Fiddle based on my last one. You will see I just forced p to be in single line to get horizontal scrolling and then increased the height to hide the scroll-able bar.
http://jsfiddle.net/VUSuZ/575/
I used a fixed height approach.
Note: this approach can help only in specific cases.
#container1{
height: 50px;
/* Just for presentation. Can be removed */
border: 1px solid red;
/* Hides content outside this container */
overflow: hidden;
}
#container2{
/* Height is significantly greater than the height of container#1 to hide
any possible scroll */
height: 100px;
overflow: auto;
white-space: nowrap;
}
<div id="container1">
<div id="container2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit, ante laoreet mattis blandit, arcu nisi blandit felis, et molestie justo lacus et sem. Nunc tempor tellus sit amet eleifend tristique. Integer eget condimentum lectus, nec viverra risus. Nullam leo lectus, placerat vitae porta eget, auctor et nisi. Suspendisse feugiat in lacus accumsan tincidunt. Fusce pulvinar accumsan sem sit amet finibus. Curabitur volutpat mi vitae eros mattis congue. In ut sem eu tellus egestas lobortis vitae eu felis. Maecenas sodales, nisl eu bibendum vulputate, neque leo finibus odio, sit amet bibendum libero dolor sed diam. In molestie magna vitae dui vulputate, eu consequat dui ullamcorper. In hac habitasse platea dictumst. Vestibulum pulvinar, mi quis mollis pulvinar, metus justo aliquet arcu, vel venenatis ipsum dolor at sapien. Sed ac odio bibendum, feugiat nibh at, viverra mi. Morbi sem nisi, ultricies non nulla pretium, gravida malesuada neque.
</div>
</div>
(My case is horizontal scrollable buttons container for mobile screens - the buttons are stuck to the above block (+ margin) and have fixed height)
I think you do not want to use
::-webkit-scrollbar {
display: none;
}
Because it will hide all the scroll bars.
A better way to hide the scroll bar but still enable scrolling in a particular container will be to follow the following example:
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
overflow-x: auto;
white-space: nowrap;
}
.container::-webkit-scrollbar {
display: none;
}
I'm trying to get two divs to float to opposite sides of the page, with text flowing between them. The top of the second (left-aligned) div should be even with the bottom of the first (right-aligned) div. The code below works fine in FF, Chrome, Opera, etc. fine, but they do not clear properly in IE. Both divs appear at the top of the text.
If I move the left-aligned div low enough within the text, it works fine in IE, but that's not really a sustainable solution.
I've found multiple pages on IE CSS float bugs, but I haven't found anything speaking directly to this.
CSS
div {
width: 200px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
position: relative;
}
.wrapper {
width: 600px;
border-color: #FF0000;
}
.right {
float: right;
border-color: #00FF00;
}
.left {
float: left;
clear: both;
border-color: #0000FF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus, dapibus ac,
consectetur quis, pellentesque eget, sem.
</div>
<div class="left">
Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan
turpis tristique consequat. Sed lacinia ligula at nibh.
Morbi in quam. Morbi commodo nibh.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus,
dapibus ac, consectetur quis, pellentesque eget, sem.
Maecenas est dui, imperdiet nec, fermentum ut,
pretium a, orci. Quisque hendrerit interdum orci.
Nulla sit amet risus non enim ultrices bibendum.
Aenean arcu purus, rhoncus at, vestibulum vel,
volutpat et, nunc. Integer eget risus eget purus viverra
congue.</p>
<p>Nullam vel libero ut purus semper ullamcorper.
Pellentesque mattis tincidunt odio. Nullam pulvinar
orci at dolor. Sed volutpat eros ac elit.
Praesent porttitor libero sed felis. Vivamus lobortis
pellentesque diam.
Proin laoreet massa ac metus. Integer faucibus lorem
molestie nibh. Integer id massa. Integer ligula ipsum,
pellentesque id, interdum at, pretium eget, orci.
Proin malesuada. Ut vel lorem.</p>
</div>
</body>
</html>
IE7 and IE6 have a variety of problems with elements that have both float and clear on them. In IE7, using clear on an element with float only clears the float below other floats floated in the same direction.
A modified version of the easyclearing fix may do the trick, but don't get your hopes up. See this page for details: New clearing method needed for IE7?.
Bottom line is that you're probably not going to get this to work in IE6/7 without cheating: moving the div down in the text, embedding the divs in paragraphs, etc.
I'm fairly sure this is one of those rare bugs in ie6 that doesn't have a pure CSS solution.
Try using the ie7 javascript - it may fix the problem for you: http://code.google.com/p/ie7-js/