i need some CSS only code that will use the flexbox and a media query to change with screen size... I want the comment boxes on my page to be moved to the left while the browser is open on a large screen or window. then when the browser window gets smaller i want the comments to shrink a little only down to about 300px where they wont shrink any more
I have linked below two screenshots of what it looks like now and roughly what I am trying to achieve (preferably with the comment boxes being longer as well)
Thanks
Not sure what your layout is like, but mess around with these properties and feel free to read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Flexbox Froggy is also a great game for familiarizing yourself with flexbox
https://flexboxfroggy.com/
main {
display: flex;
justify-content: flex-start'; // this will align the items to the left/start of the parent
}
.comment-box {
width: 33%; // or whatever you want the width to be. Percentages are responsive
}
#media(max-width: 960px){
main {
justify-content: center;
}
.comment-box{
width: 95%
min-width: 300px
}
}
Related
So as I am learning flexbox, i am experimenting with justify-content: flex-end and it comes to no avail, I want to use flexbox to move the content of the header tags to the right hand side without using padding.
my code is uploaded on gitub on: https://github.com/SmileyFaceImoji/Landing-Page
I highlighted the div that holds the header links in green to see if i didn't reference the proper tag and i did
the goal is that i make a landing page similar to this: https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png
Not sure if this is what you wanted but from looking at your image I believe you wanted this
Just add following codes
This codes places your items at end of your flex box + makes sure your items don't go too wide on large screen
If you have smaller screen, you can test this using command & - on Mac, Alt or CTR on Windows
.hero {
max-width: 1000px;
margin: auto;
}
.header-links {
width: 100%;
justify-content: flex-end;
}
PROBLEM:
I'm currently working on a from-pdf template; I'm relatively new to responsive design and am having an issue with the following: I have a button at the bottom of the page that I'm currently centering using a set margin-left value. However doing so prevents that button from 'floating' all the way to the left during screen re-size.
GOAL:
Have a solution that allows the button to be horizontally centered during 'full size' browser, but collapse and float all the way to the left when the browser size is decreased.
TRIED:
Setting padding/margin
Setting both of the above to auto
Thought about a horrible conceptual ghetto hack (I could technically make the image a long white rectangle with the button centered then make the image fluid, thus re-sizable)
WEBSITE IN QUESTION (OBJECT: ORANGE BUTTON NEAR FOOTER):
http://thedma.org/the-state-of-data/
Here you have a working fiddle
The trick is:
a {
display: block;
text-align: center;
}
img {
max-width: 100%;
}
assuming that a selects the link corresponding to the button and img is your image.
You want to use media queries for this. Specifically viewport-height or viewport-width from the sounds of things.
Link to documentation.
Basic idea:
#media (max-height: 600px) {
.bottom-button {
/* styles */
}
}
#media (min-height: 600px) {
.bottom-button {
/* different styles */
}
}
i'm trying to change the column size of the moodle theme 'clean' which is based on bootstrap.
My Moodle uses a three column layout. The left and right columns are too wide and i'm want to make them more narrow, so that the column in the middle can be displayed wider.
Moodle offers a textarea in the administration interface to add your own CSS code.
I added the following code:
.row-fluid .span9 {
width: 80.0%;
}
.row-fluid .span8 {
width: 80.0%;
}
.row-fluid .span3 {
width: 15.0%;
}
.row-fluid .span4 {
width: 15.0%;
}
It all looks good on desktop screen, but if i scale the browser window down to simulate a smartphone resolution it doesn't work. The left and right column move to the bottom like they should, but don't use the full width of the screen, but the 15% i defined in the settings.
I guess i am using the wrong class and overwrite the size for desktop and mobile design.
If anybody knows how to change the column size in the desktop version without overwriting it in the mobile version, that would be great !
In Bootstrap, all span* elements revert to 100% width at 767px and below and below:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
What's happening is that you're setting the width of those specific span elements much later on down the CSS file and therefore overwriting the section of Bootstrap which sets the width to 100%.
To follow on from what you're doing, the answer is to ensure that you reset the width back to 100% at that break point:
.row-fluid .span9 {
width: 80.0%;
}
.row-fluid .span8 {
width: 80.0%;
}
.row-fluid .span3 {
width: 15.0%;
}
.row-fluid .span4 {
width: 15.0%;
}
/* set back to 100% for smaller screens */
#media (max-width: 767px) {
.row-fluid .span9,
.row-fluid .span8,
.row-fluid .span3,
.row-fluid .span4 {
width: 100%;
}
}
Just as an additional comment for you: the whole point of Bootstrap is really to avoid hacking into the grid like this if at all possible. I suspect you'll find that forcing these widths here will also have knock-on effects elsewhere on your site.
Each 'span' equates to roughly 6% in width (not taking into account the margin between each), so a better answer to your requirement would be to edit your page markup. Where you're currently using .span4 and .span3 and subsequently forcing them to 15% these could be changed to .span2 which would be roughly the same as your currently-forced 15% width. Then tweak the other span elements which fall within that row to take up the empty areas.
I did try for increasing the width of the Middle column so that we can view the contents without scrolling it.For that we no need to write any coding.Just go to "Theme Settings" and then to "theme designer mode" and the check that box, so that we can go for our own theme.
Then go to " theme selector" then "clear theme cashes" and click "change theme".
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}
I'm looking into the whole responsive design thing and finding fluid grids great for that - the only problem is they seem to break when I try to give a fixed width to any column. As you shrink the screen, the columns pop out of float. I'd have expected a fluid column with a percentage width (or no width) just to shrink, leaving the fixed width columns in place. How easy is it to create a hybrid fluid/fixed grid like this? I've seen one solution with inline-block instead of floated blocks, but how good is that across browsers, and is it a clean way of doing things?
Here's an example of the problem: http://jsfiddle.net/andfinally/nJ97q/2/
Thanks!
Fred
Set min-width on the wrapper div to the minimum width of the two fixed columns + a little for the next column. This makes it so it doesn't push.
#row { min-width: 400px; }
The one caveat is that it isn't supported by IE6 and below and can be buggy in IE7.
--------- EDIT -------------
What would work best for you in this situation I think would be a display: table-cell setup. This will allow everything to be locked to the positions that you are looking for.
.main {
padding: 10px;
background: #efefef;
display: table-cell; //this locks to #sideNav
}
#sideNav {
display: table-cell; //this wraps the sidebar and middle and locks to main
width: 280px;
verticle-align: top;
}
.middle {
display: table-cell; //this locks with .sidebar
width: 140px;
padding: 10px;
background: #bbb;
}
.sidebar {
display: table-cell; //this locks with .middle
width: 100px;
padding: 10px;
background: #555;
}
http://jsfiddle.net/nJ97q/73/
There's no clean way of doing this. But who needs clean?
I wouldn't reccomend mixing fixed and fluid widths, but if you are, you might need media queries (plenty of polyfills available for IE). You could then check if the container is smaller than X in which case you rearrange the layout (1/3 for all columns or just everything vertical etc).
The example is a little strange though. What's in all the white space in the middle? Which is the content?
PS. Don't use min-width. That invalidates the whole responsiveness.
I'm wondering why just not to use tables?
Like:
<table class="row">
<tr>
<td class="main">
</td>
<td class="middle">
</td>
<td class="sidebar">
</td>
</tr>
</table>
It become very simple using table layout, there is no JS, same column height, full compatibility with any browser.
Here is the example: http://jsfiddle.net/nJ97q/162/
I know everybody says that using tables is bad practice, but it really solves all this issues.
I think the solution below can probably help you.
Since you are giving the "row" div width in percentage, its resizing itself every time you shrink the window. Give it a width in pixels if you can, if you can't then use min-width so that it will not re-size below min-width and thus your panel will remain intact.
To make it smooth:
You can add javascript to make it smooth. Use window.onresize event to call a function which includes code to make "row" resize slowly by using timed function which increases width of the "row" by 10 pixel or so every 10 miliseconds till the max-length, in this case the window's length is reached. But you can effectively do this if you set the width in pixels, or else an ugly zoom-out, zoom-in effect will be produced.
Hope that helps,
Ashwin
I had a similar issue where I needed to have a fixed width left column (menu structure) but have the right column resize responsively as the browser was reduced.
I ended up implementing a few extra media queries (they already existed to handle other edge cases) and finding the percentage width of the right column that worked for that media query. This does "jump" slightly (I only used 2 "extra" media queries over the standard handheld/tablet/desktop ones) but at all resolutions in between it will not break to the next line. In effect you are adjusting the context in each media query before it can break. More media queries would equal smoother breaks as the browser is resized.
I am ok with the jumps because I am not building for the use case of someone resizing their browser, but rather to make sure it works acceptably on different resolution devices.
One caveat, when figuring the percentage widths of the right column, the base width used is the width of the media query you are in, not the original full width. Also, you have to use min-width and use the size that works at the smallest resolution for each media query section.
/* 641+ */
#media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377 / 641 */
}
}
/* 725-768 */
#media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460 / 725 */
}
}
/* 769+ */
#media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504 / 768 */
}
}
/* 860-990 */
#media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595 / 860 */
}
}
/* 990+ */
#media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}