Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
Building a site in firefox now that displays three items aligned next to one another.
Each div is col-xs-6 col-sm-4 col-md-4 respectively but Firefox is breaking the row into two lines where as Chrome isn't.
Current version of Firefox. Not sure what the hell is going on. So any help would be appreciated.
Firefox
Chrome
Code
Note that page-main is just a wrapper.
<div class="page-main">
<div class="container">
<div class="row center">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
</div>
I tried it and it works...
Try this link...
http://jsfiddle.net/52VtD/7366/embedded/result/
SO says I need to post code with jsfiddle links, so ignore this..
System.Console.WriteLine("Happy now?!");
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Does anyone know how to do this type of grid style in bootstrap 4?
Thanks in advance.
Bootstrap can't provide that gird system. which you currently want.
create custom gird system for that , sharing one example with you
Click here
Bootstrap provides a way to span rows in columns but it does not provide a way to span columns in rows that is to say you cannot span a column on multiple rows . Its not possible in grid system. you have to use custom html and css for it .
Try this
<div class="container">
<div class="row">
<div class="col-xl-4">1</div>
<div class="col-xl-8">
<div class="row">
<div class="col-xl-8">2</div>
<div class="col-xl-4">3</div>
</div>
<div class="row">
<div class="col-xl-4">4</div>
<div class="col-xl-8">5</div>
</div>
</div>
</div>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I love these following portfolios:
http://www.ericryananderson.com/
http://jeremycowart.com/portfolio/featured/
I wanted to create a website with the same concept of a collage of photos connecting together. But I am not sure the best way to approach this, would I just use box-sizing and floats? Or would bootstrap make this project easier? Thank you for your help!
Edit: I was told in order to do this, photoshop would be the best method, but I would like to complete this with just programming if possible.
I don't think it's possible to achieve this with purely CSS, correct me if I am wrong.
For that kind of thing I usually use isotope (http://isotope.metafizzy.co/), it has a setting called "masonry" that absolutely positions the images like that. The http://jeremycowart.com/ one you linked up there also uses isotope.
If you wanted to go strictly with CSS all I could think of would be setting four columns and then stacking the images inside. Kind of like this https://jsfiddle.net/x74rbraa/
<div class="container">
<div class="col">
<div class="box box--portrait">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
<div class="col">
<div class="box box--landscape">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
That wouldn't be very mobile friendly, though. And you'd have to do the sorting/ordering in the code that generates your columns. For example iterate over all entries you want to show, save them in an array, split the array in multiple smaller arrays and put their contents in one col each.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I would like to know the best way of using HTML5 and div tags together. I have posted my html below.
I am using the article tag then I have sections which I am sure are correct, but I am using grids as well, so where should I put the grid div?
Is my method the best way of doing it?
<article>
<div class="grid-wrapper">
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col grid-last">
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</div>
</section>
</div>
</article>
According to HTML5Doctor, the way you've gone about it is fine. You're effectively using the divs as wrappers and that's permitted.
Source: http://html5doctor.com/you-can-still-use-div/
Since you are using a grid system, and a section element sections off content, you want the section to be inside the grid, which is defined by the div. So put the section element inside the div. Otherwise, your grid is relative to the section and not the whole page and grid system.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Am currently designing a website using bootstrap and so far I have come up with a very nice website that is supposed to respond but it doesn't when scaled down. I want the website to respond to the following screen sizes: 768x1024, 800x1280, 980x1280,1280x600 and yet I've read bootstraps docs of responsivenness and tried them but nothing has changed.
I created my own classes inside a getbootsrap template and even when I tried to put them inside;
<div class="col-md-4"><div class="andy-redbackground"</div>
</div>
even tried to get into the classes and insert:
background-size:cover;
but nothing worked out.
Try this code:-
<div class="row">
<div class="col-xs-4">
<div class="andy-redbackground"></div>
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
How to override cloudmade maps css with your own css. I emmbeded code of a map to my site, and map is displayed, but on maps are credits i bottom right corner and zoom scroller. I dont mind for credits but i want to remove that zoom scroller. I tried use css: display: none; on style of cloudemade but not helping. How to put my css over theirs?
Here's the HTML code:
<div id="yjsg6" class="yjsg_grid yjsgsitew">
<div id="user16" class="yjsgxhtml only_mod" style="width:100.00%;">
<div class="yjsquare ">
<div class="yjsquare_in">
<div class="Flexible-container">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?&lat=45.8122871952285&lng=15.97111701965332&zoom=14&styleId=102945"></iframe>
</div>
</div>
</div>
</div>
</div>
And all CSS code is in this link
Thanks!
This hack works:
#yjsg6 {
margin-left: -50px;
}
You can't affect the content of the iframe, because it's from a different origin. It should be possible to affect iframe styles with but this doesn't seem to be implemented yet.