So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.
Is there any way to select a css file by saving the screen width to a jsp variable?
Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated
Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.
Here's something like what I'm doing.
<div id="container">
<div id="inner">
<div class="1">--stuff</div>
<div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
<div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
<div class="1">2.0</div> <-- Want the text at 25% of the image (right)
<div class="2">4.0</div> <-- Want the text at 50% of the image (right)
<div class="3">6.0</div> <-- Want the text at 75% of the image (right)
<div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>
What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.
You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.
Related
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us ยป</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I got a PSD design where the grid looks like this -
Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)
I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.
My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?
I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.
My HTML file contains of a standard fluid grid
<div class="container-fluid>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
</div>
Add the following to your css
.row{padding: 0 120px;}
I'm not sure if i totally understand your question, but you can try the following:
Add a container (Bootstrap container)
Add margin with css: .col-sm-4 {margin:Your margin here;}
It really depends on what other content will be inside the rows? If the columns don't need to go from side to side, why not just use Bootstrap .container? You can still have full width content outside of the container..
http://codeply.com/go/HwIDGQpdbO
I'm using Twitter Bootstrap.
<div class="container">
<div class="row-fluid">
<h1>VeryLongWordHere</h1>
</div>
</div>
JSfiddle
On mobile screens the text becomes unreadable; leaving me with two options:
Make the text size reduce when width gets to certain size (how do I do this BTW?)
Make the text go over >1 lines; e.g.: on each segment I specify with <span> tags
However I'm not sure how to do either...
I use this CSS in my solution to a similar problem:
word-wrap:break-word
This will force words to break if necessary to force them to fit.
For your first option, there are a number of jQuery plugins that dynamically resize text to fit the width of the parent element. Here are a few:
FitText
SlabText
BigText
You could use any of these plugins to resize the text when the screen size is smaller than a certain breakpoint. Something like this:
if (jQuery(window).width()) < 600) {
jQuery('h1').slabText();
}
If the requirement is to resize the very long word on small screen sizes (Responsive Screen), min-width could be any minimum width, now if user shrink the screen size then word will break and fit into the screen size.
.wallet__address {
min-width: 50px;
word-break:break-word;
}
<html>
<div className="wallet__address">
<p>
0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb
</p>
</div>
</html>
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.
what I'm trying to do is something like this:
<body>
<div id="content" style="position:relative;">
...some content here...
THE END
<div class="red_square" style="position:absolute;right:0;bottom:-90px;height:90px;width:90px;background-color:red;"></div>
</div>
</body>
but that obviously just shows the red square at bottom. What I want is the page to stop at "THE END" if it's long enough (that is, whith scroll bars), and show the red div only for pages with little content (without scroll bars). I can do it with javascript but I was wondering if there is a pure CSS (2 or 3) solution for the most recent browsers.
Not sure if i get what your trying, perdon if in wrong.
There is max-height and min-height in the recent browsers, thats prolly help you