I am using bootstrap and trying to tweak one of the free template for admin needs. Right now the content inside #page-wrapper leaves too much space on either side when the window is maximized. I tried playing with different padding, margin size but then the responsiveness loses and the horizontal scroll bar appears. How can I reduce the spaces on both the left and right side of this content without losing responsiveness.
Please find the screen shot below
The fiddle is available here
The template was working fine originally but when I wrap it inside the bootstrap container div, I get this problem.
change the container to container-fluid
You are using .container class as wrapper. It has specific width adjustment, which depends upon screen resolution. You should use .container-fluid class for a fluid layout. Or otherwise you have to edit bootstrap css file. See the css code:
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
#media (min-width:768px){.container{width:750px}}
#media (min-width:992px){.container{width:970px}}
#media (min-width:1200px){.container{width:1170px}}
.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
Related
I am building a landing page with 3 sections (haven't coded the 3rd section yet).
Each section needs to be 100% of the screen.
Top 2 sections have 2 columns each.
I am using Flexbox for this, and everything looks great as long as the browser is in full screen, and the sections have no content. When I start adding content inside the sections, then resize the window, sections start overlapping, especially when resizing only vertically.
When resizing horizontally it's not a problem, since I can switch flex-direction:column; to flex-direction:row; to get them to stack.
How can I get a 100% view of the section while making everything responsive when window is resized and prevent overlap?
Would CSS Grid be a better option here?
Here's a Code Pen. Please slide the code pane up, then resize your window, and you'll notice how the second section overlaps on top of the first section's button, text, and image.
Code Pen: https://codepen.io/MarwanAK10/pen/eYedLoZ
If you try removing the button, paragraph, and image from the html, then the problem is gone, and on resize the sections don't overlap...
Thanks!
You can use #media queries for different size screens. So you can display everything differently depending on the screen size. You can view the documentation here.
Maybe put overflow:hidden on section
I am learning the bootstrap and I have tried to create simple page with sidebar.
My live demo is here
In this example when the sidebar is closed the content part not taking full widh of the display. any one guide me to fix this. I want content part should not be overflow out of the screen size when side bar is opened and occupy full width when side bar is closed.
You have to apply one CSS rule and need to change the container to container-fluid
Following is the CSS rule in your style.css:
#content {
width: 100vw;
}
Note:- if you fine with container's left and right spaces then do not change it to container-fluid.
Hope this will work you :)
I have been trying to develop a menubar for bootstrap in which the image logo be centerized instead to the usual left of the bar. But the problem is, the right links of the menu bar goes off screen. When I preview the page with a width greater than 2050 pixels, it looks fine.
But when I have something smaller than that, the right links didn't respond to the window change and slid off the page.
Is there any way to fix this? I have been playing around with the col-md-7 and the col-md-offset-3 class of the nav. But it didn't fix the problem, just moves/resizes it around the top.
Here is the link to the snipp of the page. http://bootsnipp.com/snippets/rvGQz
DIV with container class, that wraps your navigation, breaks the layout because of this class actually sets the width:
.container {
width: 1170px;
}
Remove container class from a DIV and that should do a magic for you.
Have you adjusted the media queries for each break point in the grid as you adjust your screen sizes?
http://getbootstrap.com/css/#grid-media-queries
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)