I was making the main of the site today and I added two <div>s. I made it perfectly so on every monitor it will display the same. However, when I tried opening it on my phone on portrait mode, the title is bigger than the free space for the <div> and the two <div>s are going one under one.
It’s OK for me because there are phones with a much smaller screen than mine. But the <div> size is staying the same; it’s not going up to 100% to fit all the screen if it’s one under one. It’s staying the same 70% and 30% and it’s awful. Here are some images of that:
And this is the code:
#glavno {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.reklami {
display: inline-table;
width: 30%;
height: auto;
margin: 0;
top: 0;
}
.novo {
display: inline-table;
top: 0;
width: 70%;
height: auto;
margin: 0;
}
.naslovnovosti {
font-size: 2em;
background-color: #41c2ac;
color: white;
width: 100%;
}
.naslovreklami {
font-size: 2em;
background-color: #41c2ac;
color: white;
width: 100%;
}
<div id="glavno">
<div class="novo">
<div class="naslovnovosti">
Новости
</div>
novost1
<hr>novost2
<hr>novost3
<hr>novost4
<hr>novost1 novost2 novost3 novost4
</div>
<div class="reklami">
<div class="naslovreklami">
Реклами
</div>
deneska se sluci cudo vo valandovo
<hr>novost2
<hr>novost3
<hr>novost4
<hr>
</div>
</div>
You need to add a #media rule in your CSS, instructing the browser to substitute 100% (instead of 70% and 30%) as soon as the window width is less than X, where X is what you think to be the good choice for this to happen.
It'd look like this:
#media screen and (max-width: 480px) {
.reklami {width: 100%;}
.novo {width: 100%;}
}
Related
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
I have a box with a margin-top (relative to the top of the page) that gets smaller with the browser window (using vw). But the header of the page (fixed and in a different z-index) is restricted with a min-width, so when it reaches the 1000px I need the box margin-top to stop getting smaller and star getting bigger... Like the smaller the windows gets, the bigger the margin-top is...
This is the box... and now i need to create a #media screen and (max-width:1000px) where it says that the height gets bigger relative to the vw.
#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}
You can do something like this using calc()
Fiddle
header {
background: black;
height: 50px;
width: 100%;
}
main {
background: green;
margin-top: 10vw;
height: 100vh;
}
#media(max-width: 768px) {
main {
margin-top: calc(150px - 10vw);
}
}
<div class="container">
<header></header>
<main></main>
</div>
I'm trying to build a page that can run at full screen but as it scales down the divs drop and fit the content and allow scrolling. At fullscreen I'd like one big box with three little boxes on the bottom. The content in the big box changes dynamically so the div needs to be able to scale on a lower resolution device. Also, on a lower resolution device I would like the bottom three boxes to stack on top of one another and all be a fixed width to fit all of their contents. My main issue is text spilling out of the big box and being unreadable on smaller screens.
Here is the HTML:
<body>
<div class="container">
<div class="content">
</div>
</div>
<div class="footer">
<div class="widget1">
<div class="widget_contents">
</div>
</div>
<div class="widget2">
<div class="widget_contents">
</div>
</div>
<div class="widget3">
<div class="widget_contents">
</div>
</div>
</div>
</body>
Here is the CSS:
*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}
.container {
height: 80%;
width: 100%;
padding: 1em;
}
.content {
height: 100%;
width: 100%;
background: rgba(150, 50, 50, 1);
}
.footer {
height: 20%;
width: 100%;
padding-right: 1em;
}
.widget1 {
width: 55%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget2 {
width: 25%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget3 {
width: 20%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget_contents {
height: 100%;
background: rgba(55, 150, 55, 1);
}
Here is a jdfiddles of my basic layout: http://jsfiddle.net/kzoqwz9n/
Thanks!
For allow scrolling, you just need to apply 'overflow:auto;' to your block.
For stack bottom blocks you need to use media queries, something like :
#media screen and (max-width: 600px)
{
.widget1,.widget2,.widget3 {
padding-left: 1em;
float:none;
width: auto;
}
}
This exemple will stack your box when the screen is smaller than 600px.
UPDATE :
For the scrolling thing, we need to apply some changes :
.container {
min-height: 80%;
margin: 1em 1em 0 1em;
background: rgba(150, 50, 50, 1);
}
We delete the style for .content and add 'padding-top: 1em;' to .footer
Exemple here : http://jsfiddle.net/kzoqwz9n/3/
It is what you want to do ? (try to add/remove content)
You basically need media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes for switching between row and column layout
My main issue is text spilling out of the big box and being unreadable on smaller screens.
set the width to width: fit-content; (+ vendor prefixes) to allow the box itself instead of just the text content to spill out of the parent container
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I'm having some trouble with a responsive design. The first that I have tried to create.
For some reason when I view the site on my iphone everything is zoomed in.
What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.
Here is the URL: http://markpetherbridge.co.uk/peak.
I have added this into the html header:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
this is the relevant CSS:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
My desktop CSS is:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
and the CSS for the phone is:
#media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
It seems to work in the browser just not when viewed on an actual phone device.
This will work when #media screen takes effect.
http://jsfiddle.net/Enxu2/1/
You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.
In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%;
}
.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}
You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.
I hope this helps!