I am working with vue and trying to make my element responsive so starting with Mobile first approach. I am using normalize.css but i don't think it has anything to do with the issue. The div is not 100% width, it cuts half way through. I am using dev tool mobile tool to emulate the screen to view.
I have attached and jsfiddle for the code.
<div>
<header class="container">
<section>
<img src="https://placeimg.com/400/100/arc" alt="logo">
</section>
<section>
Logo text
</section>
<section>
<h3>Call Us</h3>
<div class="contact__info">
<sub>Mon - Fri</sub>
12345
</div>
</section>
</header>
</div>
The fixed width: 1326px; on your header makes that element stretch wider than the viewport (if the latter is smaller than that), so it overflows out of its parent, but does not stretch the parent itself. And because that parent doesn’t stretch, the 100% with of the div inside it are still only 100% of the viewport width.
What is a header with a fixed width of > 1300px doing in this in the first place, if you want to approach this “mobile first” …? Remove it or make it dynamic as well, otherwise this makes little sense as a test case for the rest of what you are doing to begin with.
Related
content only takes 1/3 of it's while size, do you have any tips or any suggestions on how to make this take it's whole width? I did also put a width of 100% but still doesnt
Have you checked if the element you are trying to make 100% is within another element with a set width?
Example:
<div id="parent" style="width:700px">
<div id="child" style="width:100%"></div> /* the width of the "child" is 700px due to the constraint of the parent*/
</div>
I'm getting a strange behavior in Microsoft Edge for my footer.
I have extracted the problem into a fiddle so it's easier to help.
<body>
<div class="container">
<div class="inner-container">
<div class="slide-footer">
<div class="slide-icon active">
<img src="..." />
</div>
</div>
</div>
</div>
</body>
I have a footer which is positioned via flex-box to always stick at the bottom.
inside of that footer there is another flex-box which is basically used for centering of the footer-elements.
The elements inside the footer have an image inside which takes 80% of the footers height and are therefore resized.
In chrome / firefox the footer-element takes only the space which the resized image needs but in edge the element takes as much width as the original image would need and therefore breaks the layout.
Note: this does not happen all the time so here is an screenshot of what I mean:
How can I fix this?
I have written some markup for a navigation bar on my webpage, now I am trying to move onto the next section, and I noticed when I was adding another section it doesn't expand the full width: image here
I added a white background to that section, and the body's background is black. Here's some markup and CSS:
HTML Sample:
<header>
<div class="container">
<!-- fun markup here -->
</div>
</header>
<section id="work">
<div class="container"></div>
</section>
CSS Sample
section#work {
padding: 100px 0;
background-color: white;
}
I believe I have left out all irrelevant information, but if I did leave out something important that you also need, please let me know.
The simple answer here is to use container-fluid.
Please check this fiddle: https://jsfiddle.net/ya6z789x/1/
As you can see the first container class (simply container) has a set width of 1170px at larger viewports, 970px at slightly smaller and so on (it reduces as you reduce viewport size).
The second example, container-fluid, is set to 100% width of its parent. Meaning if your header element doesn't have a width defined, the container-fluid class will stretch to the full width of the window.
Alternatively, if your header element had a width of say 900px (third example), placing a container-fluid directly as a child of it will make the container-fluid element have a width of 900px. Note, you may need to expand the viewport of the fiddle to see this in action.
I'm trying to get myself comfortable with Twitter BS.
Is there away to make the hero-unit 100% width of the browser, whilst containing the columns in a fixed width?
Wrap .hero-unit in .container-fluid and .row-fluid (or don't even wrap in anything). "Fluid" in Bootstrap term means that in will take 100% width of the browser window. Wrap your other content in "fixed" .container and .row.
See how I've done this in my fiddle.
Note that as of Bootstrap 3, hero unit is renamed to jumbotron http://getbootstrap.com/components/#jumbotron
To make the jumbotron full width, and without rounded corners, place
it outside all .containers and instead add a .container within.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):