Update: Sorry about not linking the code. I cannot show the actual preview, but I can link the code via JsFiddle. Link on the bottom...
I have a site with bootstrap with the width set to 300px when the screen is on mobile,
#media screen and (max-width:991px)
{
}
Basically what I have is like this:
But, what I want it to be is like this:
How do I do this? I tried to set the container 300px, set the body and html to 300px. But still have some excess content in the sides. How do I fix this???
Link : http://jsfiddle.net/godheaper/hyfueqd5/3/
Related
I am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
I am really desperate about DIV elements positioning bug when trying to create a template for a new responsive layout web design.
The URL is: http://cs.renault-club.cz/responsive_005_bug.php
The problem: when you resize the window to be less than 800px, the "sidebar_right" (online users) DIV element displays not directly under the "obsah" (content) DIV, but bounced under the "sidebar_left" (menu) DIV element.
Please HELP! I spent already 2 hours trying anything, but without any success :(
In less than 500px it works fine, as well bigger than 800px. The current window width is displaying on the top left corner.
You have a 2 media queries causing it to push down: if you remove this
#media screen and (max-width: 800px)
#obsah {
width: 80%;
}
and also remove this
#media screen and (max-width: 800px)
#sidebar_right {
width: 50%;
}
it will work as you see below:
well, between 500 and 800px #sidebar_right has a with of 50% - that's too much to fit right of the other elements (seems like this is defined inline, in the style tag at the top of that page)
that's not a bug. it is how the box model works. try:
#sidebar_left { float:left; }
The problem that I have is this:
www.dondolomemories.it
When resizing the window the image of the logo isn't resizing until the very last moment, resulting in a horrific two row menu overflowed.
I spent almost 2 hours trying tons of different settings. Can someone help me in figuring out what it's wrong. I simply want that resizing the window instead of overflowing the logo will resize to fit the menu on the right in the same line.
Giving your web page, by my inspection, would let the menu items not be showing on default by resizing to page inner width of 1024, I checked the ul.menu_top, discovered that in line 1991 in style.css,
#media only screen and (min-width:769px) and (max-width:1024px) {
....
}
Changing the 1024px value to larger like 1280px seems resolving the overflow-break line issue.
Try giving .logo a percentage width on smaller screens:
#media and screen (max-width:600px) {
.logo {
width:50%;
}
}
That should align correctly below width 600px, of course you can input and width you want and have multiple breakpoints to align it perfectly.
I am designing my first webpage. I have completed almost all the work but now the problem lies in screen resolution. I start designing on 1920x1080p of screen resolution but when i check it on 1080x768p screen the content was missing and overlapped. Now i set the screen size of my Laptop to 1080x768 and set the webpage but while I turned it back to 1920x1080 on the right side content was missing mean only in the 1080x768p screen while i have used following code.
body {width:100%; hight:100%;}
It just fills the background images to full screen while content does not displays on full screen what to do any help?
you need to add to html and the body
html,body{
height:100%;
}
/**reset padding of body**/
body{padding:0;}
(the width of 100% is auto)
LIVE EXAMPLE
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design