I have a really annoying problem, I'm trying to make a web page that will scale well across large resolutions and mobile devices / tablets.
On a large screen, I want things to appear like this:
---------------------
| | | | |
| | | | |
---------------------
But on a small screen, I want things to appear like this:
---------------------
| |
| |
---------------------
---------------------
| |
| |
---------------------
---------------------
| |
| |
---------------------
---------------------
| |
| |
---------------------
My markup looks like this (here's a quick jsFiddle to demonstrate):
<div class="row">
<div class="small-12 large-3 columns"></div>
<div class="small-12 large-3 columns"></div>
<div class="small-12 large-3 columns"></div>
<div class="small-12 large-3 columns"></div>
</div>
Everything is working well on a PC and iPhone, yet when I try things on Windows Mobile (Nokia Lumia 820) it's thinking it's large and displaying the former instead of the latter... and it's driving me insane!!
I've put the usual meta viewport <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> and have even tried width=320 to try and trick it into thinking it's smaller.
Any advice?
Internet explorer in Windows Phone 8 can be configured to behave as a desktop or a mobile browser.
Go to Settings and set the Website preference to be either "mobile version" or "desktop version". This will affect the way the browser behaves.
If the browser is set to "desktop version" you won't be able to avoid this as it assumes a wider viewport and hence the behaviour you're seeing.
Related
I want to present name, phone and email like this:
| Joe Shmoe | 555-555-5555 |
| | joe#shmoe.net |
And when the name get's too long, I want to wrap like this:
| Josephine | 555-555-5555 |
| Hosssenpfefer | jfine#mail.net |
And when the email get's too long, I want to overflow like this:
| Joe Shmoe | 555-555-5555 |
| someverylongemail#mail.net |
I created this html, which defines a row with two half-width columns. The right hand column has two nested rows, and each of those nested rows has a full width column...
<div class="row">
<h5 class="col-xs-6 list-group-item-heading">Joe Shmoe</h5>
<div class="col-xs-6">
<div class="row">
<p class="col-xs-12 list-group-item-text text-right">555-555-5555</p>
</div>
<div class="row">
<p class="col-xs-12 list-group-item-text text-right" style="color:navy">joe#shmoe.net</p>
</div>
</div>
</div>
This almost works, but as you can see in this fiddle, the bottom nested row won't right-align. (You might need to make the view narrow to see the problem).
I'd like it right aligned just like the nested row above it. Furthermore, when the content is long, I'd like that content (not wrapped) to overflow on the left side, spilling into the left column if necessary.
Can someone give advice? Thanks!
I would try using a table for this. It might need additional styling, but find tables make it easier to handle the longer characters. Is this at all on the right track?
<div class="col-xs-12">
<table class="table">
<tr class=""><td class="col-xs-6">Joe Shmoe</td><td class="col-xs-6 text-right">555 555-5555</td></tr>
<tr class=""><td class="col-xs-6"></td><td class="col-xs-6 text-right">somereallylongemailaddress#reallylongemail.com</td></tr>
</table>
</div>
I'm a noob to html programming, but basically I want to have 3 divisions that look something like this:
| | |
| 1 | 2 |
| | |
-------------------
| |
| 3 |
| |
Right now, I'm using bootstrap and I can have columns beside each other using the div classes. But that only works if I want to do columns. For example:
<div class=col-lg-6>
Also, I can't use a fixed size, because div2 might be bigger than div1 or vice versa depending on the info that I get. Any suggestions to how I can do this?
I'm not entirely sure what you're asking. Did you want something like this?
https://jsfiddle.net/Garconis/zqptbjur/
This is utilizing Twitter Boostsrap CSS:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: gray;">
Content1
</div>
<div class="col-xs-6" style="background: wheat;">
Content2
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background: tan;">
Content3
</div>
</div>
</div>
If you don't want to use javascript, you can make those divs have fluid width like 30%, 70% and set their display property to 'inline-block', set the wrapping div's white-space property to 'nowrap'. After that, adding a br tag will drop the third div down. ..or you can just use table layout which I'd never suggest.
Is it possible in bootstrap to move div from one row to another?
I need something like this:
Desktop/tablet:
-----------------------------
|Brand |search| #row1
-----------------------------
|Menu: | MAIN CONTENT |
|-link 1| | #row2
|-link 2| |
|-link 3| |
------------------------------
Mobile:
-----------
|Brand | #row1
-----------
|Menu: =|
|-link 1 | #row2 (expanding/collapsing navbar with menu and search form)
|-link 2 |
|-link 3 |
| search |
| |
| Main |
| content | #row2
| ... |
| ... |
-----------
On mobile, i need to move search form from #row1 to collapse menu in #row2.
Unfortunately, no. There's no way to accomplish this as you currently have it. One possible compromise would be to have the original search box become invisible at a certain screen size and have another search box, identical in functionality, that is shown where you need it at that point. For example:
<div class="row">
<div class="col-xs-12 col-sm-6">
Brand
</div>
<div class="col-sm-6 hidden-xs">
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="visible-xs-block">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-8">
<main>Main Content</main>
</div>
</div>
Obviously you don't want to make a habit of this kind of thing, but sometimes the optimal layout requires you to do things like this.
Gah lost all my rep opening a Bounty and now I can't comment.
Would it be a viable option to start using a framework? Not to promote any framework in particular but personally I started using Zurb Foundation for the reason you have described alone. http://foundation.zurb.com/
I've seen this somewhere before and it worked really nicely. But I can't remember where.
Anyway, here's my desired form.
Enter a message:
+--------------------------------------------+
| |
| |
+--------------------------------------------+
|
| Enter recipients:
| +------------------+
[Send to everyone] OR | |
| +------------------+
|
| [Send to these users]
You mean like on StackOverflow?
Just inspecting the DOM will tell you what you need to know: The line is an absolutely-positioned element with a left-border, and the "or" has a background colour the same as the body to cover up the line around it.
See this jsfiddle for an example. The idea is you offer the user two options in the HTML...
<span class="screen-reader-text">Choose one of the following options:</span>
<ul>
<li id="send-to-everyone">
<!-- omitted -->
</li>
<li id="enter-recipients">
<!-- omitted -->
</li>
</ul>
...and then style the first <li> so it will float:left and have a border-right. Add some :after content to create the "or".
I have multiple floated blocks. Is it possible to specify which block should be cleared?
Check following structure:
+------------+ +--------------------+
| | |+--------+ +-------+|
| float:left | ||fl left | |fl left||
| | |+--------+ +-------+|
| | |+------------------+|
| | || ||
| | || block that clears||
| | || prev 2 floated ||
| | || blocks but doesn't|
| | || clear first fl. ||
| | || block ||
| | |+------------------+|
| | +--------------------+
+------------+
in html:
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
You need to float the parent block on the right hand side "left" as well. You can float and clear in sub-containers and the parent container will not clear.
I see you added an example now. Float left the DIV "right-column"
This is basic HTML/CSS layout. Take a look at this JSFiddle example.
When you clear a float, it will usually only clear floats within the same container, or lower. This is why when you put something with clear: both into your container at the top level it clears everything.
I have solved it with following html. Thank you for your help. Is it ok solution for my problem (it works but I don't know it works in other browsers and etc.)?
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div class="floated-left-with-100-precent-width">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div class="clearfix"></div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
This is probably pretty easy to do using bootstrap. If you're designing a new site from scratch, bootstrap's an excellent place to start anyway..