I have 2 divs that I'm trying to align a certain way with it being responsive. I basically want the right div to be on top of the left div when the width of the screen reaches a certain width. Right now they are setup splitting the 100% width of the container.
The left side is the form and the right side is the content. I want the content on top of the form to fit the width of a mobile screen. I like how the width is setup to be viewed on the desktop/laptop setting. I hope this makes sense.
Is there a way to do this with CSS or do I need JQuery for this? Please let me know if this is unclear.
CSS
#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}
If I understand you correctly, this JSFiddle is doing what you'd like it to do.
http://jsfiddle.net/isherwood/wgbn8c0d/1/
(Thanks to iSherwood for fixing the CSS)
Here's a way to do this with only CSS and CSS's #media queries:
#left {
float: left;
border: 1px solid black;
width:calc(65% - 26px);
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
border: 1px solid black;
float: right;
width:calc(35% - 40px);
background-color: white !important;
padding-left: 40px;
}
#media screen and (max-width: 500px) {
#left {
display: block;
width: 100%;
}
#right {
display: block;
width: 100%;
}
}
Ideally you could accomplish this using media queries to detect at what screen width you want them to stack.
At that width say it's 768px for instance. You could then remove the float values and set the widths to 100%. If you mark up your HTML so that the right section of content is coded before the left then it will just naturally be rendered first above the left side.
#container {
display: flex;
}
#left {
order: 1;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
order: 2;
width:35%;
background-color: white !important;
padding-left: 40px;
}
#media only screen and (max-width: 767px) {
#left, #right { width: 100%; }
#left { order 2; }
#right { order: 1; }
}
If you don't have to support IE9 and below you can use display: flex and then just change the order of the items on the breakpoint where you want them to stack
The short answer is no you don't need jQuery and yes you can use CSS.
What you need is a grid system. The underlying grid will be using media queries to get the screen size, which you can do as well, but a grid system would be better as far as covering edge cases and you wouldn't have to reinvent the wheel.
A couple of popular grid systems to take a look at:
Skeleton
Foundation
Bootstrap
In my humble opinion if you are trying to do something simple Skeleton would be the best place to start because it will give you an efficient grid without getting in your way with other opinionated features (like colored buttons).
But if you want your CSS framework to define other parts of your style as well feel free to go for Foundation and Bootstrap which are (arguably) more popular.
Related
I have two divs side by side, chat_bubble and character_image. The chat_bubble is a fixed percentage of the screen width/height, and the character_image fills the rest of the space. If the screen width is too small to fit both, character_image is tiled underneath and cuts off the image vertically to make space for chat_bubble.
I want to change this so that if the character_image must be tiled underneath chat_bubble:
The image is changed to a new image
That new character_image is now a fixed height and width of the screen, and for chat_bubble to fill the remaining vertical space.
chat_bubble needs to be 100% width of the screen when character_image is underneath, instead of 70%.
What's the best way for me to do this? I am doing this as a JavaScript project, do I need to add if conditions to my JavaScript to do this or can it be done responsively through CSS?
Here's my code pen to show how it is now:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's the relevant CSS code:
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 30vh;
object-fit: cover;
background: #ffffff;
float: right;
overflow: visible;
}
No need to load a new image using javascript but make the theme/image responsive.
First, make sure HTML doctype is HTML5 <!DOCTYPE html> and contains the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
Then, apply css like for desktop view.
#chat_bubble {
width: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
width:30%;
float: right;
}
#character_image>img{
width:100%
}
For mobile view, using media query for mobile. For example
#media only screen and (max-width: 700px) {
#chat_bubble, #character_image{
width:100%;
float:none;
}
}
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
Is there a way to make this kind of layout with pure CSS or CSS + little JS? (click my avatar to enlarge reference image =)
My attempts to use floats and display options haven't succeed. See
http://jsfiddle.net/vdk2wns1/1/
Tiles will be used for images and iframes.
p.s. using external code (like Masonry or Isotope) is not appropriate here.
One approach would be:
#container {
max-width: 860px;
margin: 0 auto;
height: 100%;
height: 100%;
}
.block {
width: 23%;
height: 200px;
background: #ccc;
margin: 10px 1%;
float: left;
outline: 1px solid red;
}
.block:nth-of-type(3) {
clear: left;
}
.block:nth-of-type(5) {
float: right;
width: 48%;
height: 420px;
margin-top: -210px;
}
#media screen and (max-width: 640px) {
.block:nth-of-type(3) {
clear: none;
}
.block:nth-of-type(5) {
float: left;
width: 23%;
height: 200px;
margin-top: 10px;
}
}
Since it appears you wanted to adapt to different screen sizes, I changed the widths to percentages to make it responsive. This Fiddle shows the result.
If you didn't want to float Block 5 right, you could position it absolutely.
I expect that you can adapt the basic ideas to your needs.
Here is how I solve my problem after #bobdye shared his idea.
The final code (jsfiddle) is: Here
The solution appeared in 4 steps:(1). style large block with float: right;(2). clear float of the second small block;(3). set up negative margins for large block while in 3-cloumn layout;(4). make some adjusments to #media queries.
Hope this will help someone else =)
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
I have a div with a fixed height. When I resize my browser window and the div's width becomes smaller, the elements inside the div jump below expanding the height. How can I make the elements visible by adding a horizontal scrollbar?
I have tried all CSS scroll properties, but could't make it work:
.dhButtonToolbar{
position:absolute;
top:6px;
left:0;
bottom: 5px;
width: 60px;
background-color:yellow;
border:0px solid white;
margin-left: 5px;
margin-right:5px;
margin-top: 5px;
}
#media screen and (max-aspect-ratio: 1/1) {
.dhButtonToolbar {
height: 55px;
left:5px;
overflow-y:auto; //here my elements jump below I want to add a horizontall scrollbar
right: 5px;
}
JSFidlee: http://jsfiddle.net/x7xm3/2/
Try resizing and elements will fall below!
Just add a body and give it a min-width. Is this what you wanted?.
Hope it helps.
I change in your jsfiddle. please check this.
jsFiddle: http://jsfiddle.net/x7xm3/16/
It completely working.please check.