I'm using Semantic-UI with React JS.
This is my top-most html:
<head>
<title>Title</title>
</head>
<body>
<div id="render-target" class="ui fluid container"></div>
</body>
As you can see I am using a fluid ui container, which means I want the container to be as wide as the browser....
This works at a bigger browser size.
However, for some reason, if I reduce the size of the browser, at a certain breakpoint the container gets some margin on both sides automatically.
What is the reason for this and how do I fix this so that it always is as wide as the browser?
Thank you very much.
.ui.fluid.container {
margin-left: 0 !important;
margin-right: 0 !important;
}
This made it work for me....
Related
I have problem with text width on mobile devices on this website.
I need to make text full width.
I try make div 100%, 1000px, insert text in table, make body min-width...
do you want to justify text on the screen?
You can use text-align CSS property to center.
like this
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
for below HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
or set margins of the screen like:
.center-wrapper{
margin: 0 auto;
}
It seems to me your problem has to do with wrong viewport declaration.
You should use
<meta name="viewport" content="width=device-width, initial-scale=1" />
instead of
<meta name="viewport" content="width=1024">
Because you want to make sure the viewport gets adjusted correctly according to the pixel ratio of every mobile device. See also https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag for more detailed information about usage of viewport
How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
I am creating an HTML5 web page with a one column layout. Basically, it is a forum thread with individual posts.
I have specified in my CSS file the column to be 600px wide and centered it in the window using margin: 0 auto;. However, some images that are in the individual posts are larger than 600px and spill out of the column.
I'd like to widen an individual post to fit the larger images. However, I want all the other posts to still be 600px wide.
Right now, I'm just using overflow:auto which will create a scroll bar, but this is less than ideal. Is this possible to have the an individual post width grow for larger content yet stay fixed for normal content? Is this possible using just pure CSS?
Thanks in advance!
try using min-width: 600px instead of width, though it won't work in old versions of internet explorer.
You can use display:table on divs that contain your posts. You can see the effect with this example markup:
<html>
<head>
<style>
.post{
margin:0 auto;
border:1px solid red;
display:table;
}
</style>
</head>
<body style="width:100%;border:1px solid blue;">
<div class="post" style="width:600px;">
asd
</div>
<div class="post" style="width:900px;">
asd
</div>
</body>
</html>
Of course this will not work IE under version 8.