Hey could someone tell me if this part of my css is right or wrong?
I personally think it is wrong but this is the only way I can place content in the center of the screen, if I replace the 999px with auto everything goes to the left.
If anyone knows how to write it properly that would be great!
I have been making website for quite a while now but I need to learn the right way.
#wrapper {
width: 999px;
margin: 0 auto;
}
DEMO
If you want that #wrapper stay in the center of your page your code is correct.
You can specify every width you want, but not auto.
If you are looking for Responsive Design, take a look at the #Media Queries
http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html
Example:
Write your css for normal style, then add:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Here you can specify different size and style for browser with that min or max size.
A good tool for start using Responsive Design is: Bootstrap
Related
I'm not seeing why max-width: 400px is forcing the image to be 400px on small screens for the following site:
On https://compucademy.net/hypothesis-testing-with-python/
Can anyone explain please, and maybe give me an appropriate #media rule to fix it?
Width is being overridden, for mobile specific you can use
#media screen and (max-width: 768px) {
.... CSS goes here
}
You can also use the "min-width" if its mobile priority application/website.
Hope this help.
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I'm working on this website http://sg.nowcommu.myhostpoint.ch/ and what i simply need is to align the content in the middle only on Tablets and Smartphone.
This is how it looks like on iPad for example enter image description here
use a media css statement such as
#media only screen and (max-device-width: 769px){}
and then add the relevant items to it such as
.text-r,.text-l{text-align:center}
You also might have to overwrite your other css statements by adding a few of the following, remember to use !important if the need arises
float: none;
width: 100%;
You are using two classes to align content left and right .text-r and .text-l just change the alignment for these two classes to center for screens less than or equal to 768px:
#media all and (max-width: 768px) {
.text-r,.text-l {
text-align: center;
}
}
Im using the bootstrap 2.3.2 css framework to set out the interface for a web app. Im using the responsive version of the framework.
The application dosnt need to be mobile + tablet responsive, but im using the responsive version so the interfaces scaled horizontally on wider monitors (a large part of the UI is tabular data so users with bigger screens will appreciate being able to use the full width of their screens).
Is there a way i can use the responsive features of bootstrap, but stop them being responsive after a certin point - ie. at < 1000px the interface would no longer be responsive (a user could still make it larger, but not smaller)
Essentially i want to stop the span and offset elements that make up the grid scaling after <1000px
I have modified Bootstrap to not include the responsive features for devices under 1000px.
This example should demonstrate this: http://floating-wildwood-8562.herokuapp.com/examples/grid.html
You can use this modified responsive bootstrap css file here.
This required two changes to Bootstrap's LESS files and a rebuild of the framework.
Shown here and here
You may also decide to add this to your css:
html, body {
min-width: 1000px;
}
This way the window will be forced to be at least 1000px.
Haven't used bootstrap, but it must have a css, u should see how u called your main wrapper and at the end of it add.
#media screen and (max-width: 1000px) {
#main_wrap {
width:1000px;
}
}
I re read your question and this is what you have to look for example, you keep the main wrap at 100% width, but theres some elements like image wrappers text wrappers, etc... so... look for all of them in the css (not media queries) and place a min-width... example
/* ------ NORMAL FORMATTING Examples */
#img_wrapper {
min-width:300px;
}
#text_wrapper {
min-width:400px;
}
#logo_wrapper {
min-width:100px;
}
/* ------ Media Queries */
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
}
why this U don't have to query them when they achieve to that min-size they wont resize anymore, they will stay that size even. if the screen keeps resizing.
I hope this helped
If you wanna query them then don't put a min-size just give them a exact width
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
#img_wrapper {
width:300px;
}
#text_wrapper {
width:400px;
}
#logo_wrapper {
width:100px;
}
}
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;}