I've noticed that StackOverflow resorted to using a table-based layout for the comments area beneath posts:
Notice how the text all stays to the right of the button area, regardless of how many lines of text there are. I am trying to accomplish the same effect using a table-less layout, and failing miserably. Is there any good way to do achieve this without tables?
I think this is a good start:
<div class="comment-row">
<ul class="icon-set">
<li class="icon-1">icon</li>
<li class="icon-2">icon</li>
</ul>
<div class="comment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
CSS:
.comment-row { position relative; }
.icon-set { position: absolute; }
.icon-set a {
display: block;
text-indent: -99999px;
border: 1px solid;
width: 16px;
}
.comment { margin-left: 30px; }
Live Sample:
http://jsfiddle.net/HPbFJ/
.sidebyside { float: left}
<div class="sidebyside">
<input type="button" value="VoteUp" /><br />
<input type="button" value="Flag" />
</div>
<div class="sidebyside">Text</div>
Isn't it just as simple as this?
EDIT
Your example (fixed):
<div style="overflow: hidden;">
<div style="float: left;">Left Content</div>
<div style="float: left; width: 100px;">Right Content Right ContentRight Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content </div>
</div>
Alternate solution: http://jsfiddle.net/7JukV/
Just for the sake of alternatives... :)
Related
This question already has an answer here:
Media query in responsive email template
(1 answer)
Closed 3 years ago.
I'm setting up an email which contains in the body a picture and some text. On normal computer screens the image is to the left and the the associated text to the right (using inline-block).
This looks like so:
(https://www.flickr.com/photos/183424995#N08/48518551371/in/dateposted-public/)
When the screen size is changed ie. for an i-phone, I'm aiming to get the text to move underneath the image and rather than just having a width of half the screen (as it's inline-block), to take up the whole width of the screen underneath.
What I'm trying to get:
https://www.flickr.com/photos/183424995#N08/48518549646/in/dateposted-public/
What is actually happening:
https://www.flickr.com/photos/183424995#N08/48518724692/in/dateposted-public/
I've created a "main" div containing the image div, and a div containing the text, both inline-block. The "main" div has a width set to 100% and the text div has a min and a max div so it can move from next to the image to under the image depending on screen width.
I've tried rejigging the max width of the text div to be wider, but then the text never remains to the side of the image. And I'm trying to avoid floating anything.
I can't use bootstrap or flexbox as it's an email so am limited to fairly basic CSS.
The JSFiddle is https://jsfiddle.net/cfn76vqz/ to show what kind of responsiveness I have so far. And the general HTML structure is as below.
<div id="main">
<div id="left">
<div >
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div >
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
TLDR: I'm stumped on how to make the text div essentially be 100% of the width if underneath the image but also 50% if there's space to have it to the side of the image. As far as I understand it's always going to be limited to 50% as it's part of an inline-block section.
Because you set width with this why it's not fully of width
max-width: 50%;
So... How we can do
We need to use FLEX display
like this
#main {
/*---HERE---*/
display: flex;
flex-wrap: wrap;
/*----------*/
background: yellow;
width: 100%;
}
#left {
background: orange;
}
#right {
/*---HERE---*/
flex-basis: 0;
flex-grow: 1;
min-width: 50%;
/*----------*/
background: green;
vertical-align: top;
}
<!-- YOUR OLD CODE -->
<div id="main">
<div id="left">
<div>
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
if you want to learn about flex ...more here
you can use viewport units like width: 100vw and height: 100vh for make it responsive depending upon height and width of display.click here
I have this set up on desktop with a headline on the left and an image on the right. When I collapse the browser less than 880px, I want the image to be centered underneath the headline.
I am struggling with getting the image centered & underneath the headline.
I am fairly new to html/css so any tips would be greatly appreciated.
Fiddle: https://jsfiddle.net/o7k5qgne/1/
<section class="hero">
<div class="hero-inner">
<h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
</div>
<div class="split split-right">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
</section>
<div class="clients">
<h2>Lorem ipsum dolor & sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
Try using CSS media Query to detect where (breakpoint) you want the DIVs to stack. See the example below and adjust as needed.
.myDiv {
height: 150px;
width: 150px;
display: inline-block;
background-color: orange;
margin-bottom: 25px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */
#media screen and (max-width: 320px) {
.myDiv {
width: 90%;
display: block; /* Stops it from floating */
margin: auto; /* Ensures that it is centered */
margin-bottom: 25px; /* Space between the stacked elements */
}
}
<div class="myDiv"></div>
<div class="myDiv"></div>
More on CSS Media Query
See it here in action. Resize the browser to see how it works.
Problem is with your css. Here I edited your css just to the once that need to make the image and headline responsive.
[https://jsfiddle.net/ss123/a7q834sL/1/][1]
Styling like you are expecting can simply be achieved by using css flex box. To do that you must first put the content inside a container and make it display:flex. Then you can use the flex styling for the content inside the container.
flex-direction:column will stack the content over. flex-direction:row will put the content in a single row. jstify-content:space-venly will justify the content elements with exactly even spaces between them.
You are on the right track here with the media queries you have in place. I would avoid using the absolute positioning on the image, it will get set exactly where you tell it to and not be very flexible. Centering can be done in several ways like with flex box as others have mentioned, or even just throwing a text-align: center on its' parent element. With your media queries on mobile, be weary of padding or vh/vw that you have in place from desktop, you may not want those still in place when you get to a small screen size; looks like in your example you would want to remove padding and the vh on mobile. Also, to help your CSS be a bit easier to manage I would recommend putting your media queries right inside the class to avoid repeating a lot of code, like so:
.hero-inner {
/* Flexbox Stuff */
display: flex;
align-items: center;
/* Text styles */
text-align: left;
width: 50px;
#media only screen and (max-width: 880px) {
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
</div>
</body>
</html>
I'm trying to build a responsive video component for my portfolio site.
It's essentially a mobile app video which I am positioning on top of a phone mockup, however, my problem is that I want to mask/crop them both within a container, but still make them responsive or fluid.
I've figured that using Overflow hidden on the containing div works but when I change the browser size I would like the height of the containing div to maintain the masking.
Here are some images to describe my situation.
and also a JS Fiddle
<section class="feed">
<div class="feed-element">
<div class="animation">
<div class="screen">
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="phone">
<img src="http://www.anthonyeamens.co.uk/test/images/iphone#2x.png">
</div>
</div>
</div>
<div class="feed-text">
<h1>
Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
Ok, I will try with this solution. First of all, this is not a good solution: it is plenty of MAGIC NUMBERS (https://css-tricks.com/magic-numbers-in-css/), a really bad thing in CSS.
Iframe & Phone image have no related measures (the first one is almost a square, the last one is pretty vertical) so it's really hard to make them get along.
For all these reasons, my first answer is: ok, here there is a structural problem and all the work should be redesigned to remove all those hack&trick.
However, I know, this isn't a real solution for you 'cause you have to finish your work with the videos & images you have already done. So, to try to help you I kept the structure you have created with very very small changes: I trasformed phone image in a background and I removed some div's.
This is the situation.
CSS:
.feed {
max-width:1170px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 2.564102564102564%; /* how scary! (^_^;) */
grid-column: span 12;
align-content:center;
justify-content:center;
align-items:center;
margin: 50px 0px;
}
.feed-element {
position: relative;
grid-column: 1 / 7;
overflow-y: hidden;
background-color: #F6F6F6;
background-image:url("http://www.anthonyeamens.co.uk/test/images/iphone#2x.png");
background-size: auto 124%; /* MAGIC NUMBER */
background-repeat:no-repeat;
background-position: center -28%; /* MAGIC NUMBER */
}
.feed-text {
grid-column: 7 / 13;
}
.animation {
max-width: 370px;
margin: 0 auto;
}
.embed-container {
position: relative;
padding-bottom: 124%; /* MAGIC NUMBER */
overflow:hidden;
margin-top: 22.84%; /* MAGIC NUMBER */
margin-left:1px; /* MAGIC NUMBER */
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 8%; /* MAGIC NUMBER */
left: 0;
width: 100%;
height: 100%;
}
#media only screen and (max-width:400px) {
.feed-element {grid-column: span 12;}
.feed-text {grid-column: span 12;}
}
And this is HTML:
<section class="feed">
<div class="feed-element">
<div class="animation">
<div class='embed-container'><iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
<div class="feed-text">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
I don't know why but the Stackoverflow Code Snippet have some troubles working with these CSS & HTML - maybe because there is an iframe inside another iframe... or just because this is not a good solution... (^_^;), but I tried it in a normal situation with my browsers and it works.
I create also a jsfiddle: https://jsfiddle.net/692hd1tL/5/
So, you can use this solution, if you want, but after this work... forgot it! Absolutely! :D
Cheers :)
.rounded-box(#border; #radius; #bg-color: transparent; #padding: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
padding: #padding;
}
I have a mixin creating a rounded corner box, in the screenshot below, you can see that it does not have any spacing between each div, which has .make-column(4) applied to each.
*I do include the bootstrap.less into my main less file and run lessc to compile and this is in the screen shot you see is over 990px wide. Any help is appreciated.
#rounded-box-radius: 10px;
#rounded-box-border: #ccc;
#rounded-box-height:230px;
#box-bg-color: #eee;
.article {
.make-column(4);
}
.promo {
.make-column(4);
.visible-lg;
.rounded-box(#rounded-box-border, #rounded-box-radius);
height: #rounded-box-height;
} // promo end
HTML
<div class="promo">
Promo
</div>
<div class="article">
<h3>Blog Entry 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor.</p>
<div class="date">March 23, 2013</div>
<div class="read-more">Read more</div>
</div>
<div class="promo">
Promo
</div>
I think bootstrap 3 uses padding for column separation instead of margins. Your border wraps around the entire element, including the padding. You may need supply your own margin rules for column separation instead of padding to get bordered boxes with separation between them.
#jtlowe is right in https://stackoverflow.com/a/18127896/1596547 about the padding. But applying margin rules on your columns will break the grid (due to margins adds up with the width).
Use an extra container, just like here: need spacing between divs using twitter bootstrap v3 (duplicate??)
html
<div class="promo">
<div class="rounded-box">Promo</div>
</div>
less
.rounded-box(#border; #radius; #bg-color: transparent; #margin: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
margin: #margin;
height:#rounded-box-height;
}
NOTE apply the height (#rounded-box-height) here and replace the padding with margin
I have 3 divs inside a wrapper div. Inside my wrapper div, my leftmost div is an arrow image I'm using to navigate between sliders using js. The middle div is the slider, and the right div is the right arrow to move to the next slider.
Here's the code for the slider:
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<h3>Heading1</h3>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
There will be multiple slide classes, but for the sake of the question I only added 1.
For some reason though, my right div with my right arrow is being pushed down. Looking at it in Chromes element inspector there is a 50px right margin on my slider div that I'm not defining anywhere (I see the orange color, but there's no CSS markup for it).
I've recreated the problem in jsfildde here: http://jsfiddle.net/maZbF/1/
I want that right arrow to line up with the other two divs. I've wrecked my brain trying to figure this out and debug it in chrome with no avail. Am I missing something simple?
In order for floated content to stay on the same line, all floated content has to be defined before any normal content.
In this case, you have your left button floated to the left first, which works because it was first. Then you have your division which is not floated and is display: block. A block-level element will always push anything after it down to the next line, even if you define a width for it. So when it gets to your right button after that, it is starting on a new line and floating to the right of that new line. It's starting 131px down from the top, since your division before that has a height: 131px defined on it (and the other content inside it is just overflowing past the boundaries, not interfering with your right-floated element).
So, you have a couple options:
Define your right button immediately after the left button.
Float all three elements to the left so they stack on top of each other.
I think the issue you're having is that your right div is position:relative while the left is position:absolute. I think you can simplify this layout using simple floats though:
HTML
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide">
<h3>Heading1</h3>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
CSS
.twocol_double {
width: 500px;
float: left;
font-size: 1.2em;
}
.btn_left {
cursor: pointer;
display: block;
width: 20px;
height: 170px;
float: left;
background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center;
}
#slide_wrapper {
width: 460px;
height: 131px;
display: block;
float:left;
}
.btn_right {
cursor: pointer;
width: 20px;
height: 170px;
float: right;
background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center;
}
h3 {
font-size: 1.5em;
color: #7DAC20;
}
p, blockquote {
padding-bottom: 20px;
font-size: 1.3em;
color: #636B75;
line-height: 20px;
}
http://jsfiddle.net/Eb3TA/