I'm drawing a blank at how to make text dynamically grow and shrink to always fit a page perfectly so that various word groups always take up the full width of various screen sizes.
I'm on a phone browser right now, so excuse me if I don't post full html examples, but here is the gist of common scenarios that I'm trying to have a technique to resolve:
<div>
<div>
<a>nav element</a> <a>another</a><a>lots of text in this nav element</a>
</div>
<div>
... another set of links wwith different text here ...
</div>
<div>
... and another ...
</div>
</div>
All told, the above layout would take up exactly three lines all the way across the screen on any screensize or window size.
A simpler example:
<h1>Hello World</h1>
Wherein not only would the h1 have a width of 100% of the screen (easy) but the text content itself would grow in font-size to fit 100% of the screen.
Similar techniques that I am aware of:
Font-stretch // except it just squashes/stretches text without regard for the text containers
Font-size:5%; // except this deals with the vertical scale of each letter.
text-align:justify; // except it just adds space instead of scaling up the font.
I'm not aware of a pure CSS way to accomplish this. I believe you have to use JS. There's several scripts and plugins out there for that. Here's one for jQuery:
http://fittextjs.com/
Media queries is probably the closest thing that exists to what you are looking for. Another good term to search for is "Responsive Design", its been a fairly hot topic on most of the designer blogs I follow in the last few months.
You can't. Not with css.
Sorry.
You can probably program something with javascript.
Related
I'm trying to make text span the entire width of the page, like so:
http://www.thecut.net.au/
I've looked at the source, but am unable to make sense of how they achieve this. Some direction would be useful -- thanks.
Learn how to use your browser's inspector. It's very easy to work out what you wanted to know:
The solution for the website you mention is to use an image. Images are much easier to control the appearance of, especially when accounting for the many different browsers and screen sizes available now.
Two ways to display an image that spans the width of the webpage are:
Image tags: <img id="largeTextImage" src="image URL" style="width:100%;" />
Background Images: <div id="largeTextDiv" style="background: url(image URL) no-repeat top center;"></div>
Image is definitely the way to go if you're trying to reach a pixel perfect look and to simplify your life.
Otherwise, you could also look at using different font-sizes and using media queries so that depending on the width of the window, a different font size would show up. This wouldn't be recommended though.
i've a simple question. I'm learning now webdesign, but i find very difficult having grids based on pixels; the matter is due to responsive elements.
I can't just insert mediaqueries, because images, for example, have to resize for every pixel, not just at the logical breakpoint.
So my solution, as simple as possible, will set a width: %; for every column (I'll have 1 or 2 columns, but the images and the content have to resize for every pixel).
Then take Skeleton.. i saw it, but it seems it's the same copy of 960gs except for the mediaqueries... and it's still the same problem.
I can think that 960gs could solve problems just in a big site where you have many elements (3-4 columns) and you don't need to increase or resize their widths (for example for the max logical breakpoint at 1024, for example, u don't need another space for the columns, you just do a margin: 0 auto; for centering the whole site).
So, what do you think? I need an advice. Thank you.
EDIT:: a code sample (i said it was just 2 columns)
<header>
some social media pixtures
</header>
<nav>
logo and menu
</nav>
<aside>
pictures
</aside>
<section>
some articles
</section>
<footer>
copyright and about me
</footer>
960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.
Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}
I have a web page with a two-column layout for desktop screens and the HTML is written in a particular order to achieve the desired layout, basic set up below:
<div>
<div class="left-column">
<h1>Heading 1</h1>
<p>Text here...</p>
</div>
<div class="right-column">
<img>
</div>
</div>
<!-- columns to sit side by side -->
However, for smaller screens, this layout has to be simplified (one column, top > down) but I'm finding it difficult to re-position these elements with media queries because of the original ordering of the HTML. For smaller screens, I'd like the layout to be as follows:
<div>
<h1>Heading 1</h1>
<img>
<p>Text here...</p>
</div>
As you can see, I want only one div and the <img> to move inbetween the <h1> and <p> elements.
How can I achieve this alternate HTML layout which will display only on smaller screens?
Crude solution but this one's a no-script one.
Keep a duplicate img element in the left div as well between the h1 & p. Keep it dislay:none by default. Then using media queries make it visible when you wish to show a single column view & hide the other img element or right-column div altogether.
if you are familiar with PHP you should use a library (like http://mobiledetect.net/) to detect the device your site is run from and then serve the version you want to display.
In your case you would have an if/else sentence with your divs wrapped in a PHP variable depending on the results of mobiledetect. This makes sure you don't have duplicated content (which is bad for SEO).
On looking at your HTML it seems like both desktop and mobile devices are about to show the same content with only difference in class name give to div.
If you are doing like that my suggestion is: Keep same name for div, do not repeat it. Like you hide the div, write separate styles for different screens (Media Queries). Try to write styles in percentage, so that only few elements require separate styles in mobile devices.
eg:
/* Desktop styles */
#media screen and (max-width: 600px)
{
/* Styles for elements upto 600 */
}
I would think to build a responsive design (if possible) if targeting it for desktop and mobile, because that really saves a lot of time and gives a graceful solution.
However, as per your question, it is not a bad practice at all and is accepted if you have different sets of content for them. A lot of big product companies have used this approach.
Please check this link, might help - http://mobile.smashingmagazine.com/2012/07/19/do-mobile-desktop-interfaces-belong-together/
I need to dev a very flexible layout for a cms so that the structure auto-adjusts regarding the content.
The basic layout min-with layout is suposed to obey 1024px wide and it works fine for the most os the cases, but as we're talking about a cms, the editor very often creates content or copy/paste it from word and the content makes the layout stretch out so that i can look nice.
This is a huge challenge for me and i don't know you can i create a dynamic layout that behaves nicely regardless the content.
I only can think in jquery to help on this, and compute the content size and try to reset it to the appropriate size, but that doesn't look very easy or clean solution to do it.
So i'm posting this question to "hear" from you and have some cool suggestions an ideas that i can try out.
I'm sure most of you hava faced similar challenges.
Here's the layout i'm working on
alt text http://img132.imageshack.us/img132/7661/0606y.png
A problem I've often had with layouts such as that is you want two columns to stretch to be the same size with dynamic content, but it doesn't always work. Here's a bit of Javascript that you might find useful in the future:
document.getElementById("sidebar").style.height = document.getElementById("content").offsetHeight + "px";
This assumes your height is in px (which it is 99% of the time), but it's useful for vertically stretching columns to match other columns.