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>
Related
In my website, I have a box that's not sizing like I want.
<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.
<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?
And how can I make it work on both?
Have you even read the documentation of Bootstrap?
http://getbootstrap.com/css/#grid
Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
That influences the devices with a resolution of 767 pixels or less.
So to come back to your question: are they combineable? Yes, they are
The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.
Happy HTML'ing!
.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.
HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.
If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
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.
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