I have a client asking for a very odd request (to me).
Ok, so I have 3 images. All different sizes. They want them in a wrapped container, equal heights. Images positioned at the bottom, text at bottom.
Now, doing this is easy... until you get to the responsive part.
This site:
http://www.neilcramerphotography.com/
Full screen, they look ok (still working with it). But once you resize the screen (which I foresaw happening) the layout gets all wonky.
I only need to worry about the first 6 images, rest is set design.
No matter what I do or use, there is some sort of fixed number. Like I have to set a fixed height for each of the first two rows. Tried padding. Getting frustrated because I can usually solve most problems. Just stuck.And if it is NOT doable. I need others stating so. People never believe me,so :)
I may have to try percentages instead.
I wish people understood not everything you do on paper can not always be easily converted to something like this without problems. A layout from some other designer that does not know CSS.
Thanks in advance.
add box-sizing: border-box to your .woo_category_subs
Is this what you're asking?
Are they open to a 3rd party library? I'd personally recommend Twitter Bootstrap. It's a very powerful, scaleable framework. In addition to carousels, navbars, glyphicons, accordians, and bunch of other doodads, it supports responsive image resizing through a breakpoint based grid system. I use it on my personal website and blog which you can test the responsiveness of with Google Chrome's inspector (accessible inside any Browser with CTRL + SHIFT + I). An example of a responsive image from my website is below:
<div class="col-lg-2 col-sm-3 col-xs-4">
<a class="linkPic" href="mailto:james.jm.taylor#gmail.comSubject=Nice%20website!"
title="My Email" target="_top" rel="external">
<img class="img-responsive" src="images/mail.jpg" alt="Email me">
</a>
</div>
The magic happens in the class declaration for the first div tag. Specifically "col-lg-2 col-sm-3 col-xs-4". What this translates to is an application of a bootstrap css size rule scaling the picture to 1/6 screen size on desktops, 1/4 on tablets, and 1/3 on smartphones (the bootstrap grid is 12 columns wide, and lg, sm, and xs corespond to desktop, tablet, and smartphone respectively).
Hope this helps.
Related
Here are pictures of the buttons. I wanted the buttons to show up together because without columns they were dropping down to a new line and it looked ugly. Now it works on browser, but not on mobile. I'm sure this is because I defined 3 columns and mobile doesn't have room. But when the browser resizes it moves the buttons accordingly. How do I get it to do that on mobile?
Browser:
Mobile:
Here is the code I used:
<div class="row">
<div class="col-xs-4">Online Reputation</div>
<div class="col-xs-4">Review Management</div>
<div class="col-xs-4">SEO & Web</div>
</div>
On mobile devices, the available width to display elements is usually too narrow to have multiple in the same row while still keeping their texts readable (ie. Not truncated, heavily shrunk down, or wrapping within themselves).
The most common solution to this problem is to display the elements side-by-side when there is available space to do so, but start to stack them after the screen shrinks below a certain width (by styling them using media queries). This is a key part of responsive design, since desktop layouts rarely translate properly to mobile devices. (See Changing the Page Layout Based on Breakpoints for more details on this.)
Bootstrap has breakpoints built into the framework, so there's no need to do any extra work for it. You have the options of xs, sm, md, and lg, which correspond to predefined ranges of screen widths.
You've already used the xs breakpoint in col-xs-4, which basically means that at every possible screen width, the buttons should be 4 units wide. But this doesn't display properly on narrow mobile devices, as you've noticed - so your next option is to go one width higher and use col-sm-4. Doing so would preserve the 4 unit width at any screen width of sm and above, but would stack the buttons once the screen narrows to the xs range:
<div class="row">
<div class="col-sm-4">Online Reputation</div>
<div class="col-sm-4">Review Management</div>
<div class="col-sm-4">SEO & Web</div>
</div>
Here's a demo to show you how that looks. Hope this helps! Let me know if you have any questions.
You need to change text size to something smaller and or less padding of the buttons for it to fit on mobile. Where is your CSS?
I'm currently working on my project adding a mobile friendly design using CSS3 Media queries. I'm progressing fine, but I have a problem on the main page: When resizing the browser it gets stuck at 381px and doesn't go any tighter. My design should go all the way down to 240px in width.
It's the easiest to just give you the link to the page in question http://dev.hobbyathletes.com
There must be something in the container <div class="content"> that blocks the resizing. I can't find it though. All the containers within have widths in percentage. There is a wowslider element in there, but I hide it with display: none at a width less than 480px
On http://dev.hobbyathletes.com/blogs it works fine, where the container <div class="content"> is basically empty at the moment.
Your help would be very much appreciated!
I'm not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.
I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?
Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?
Thanks!
This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.
There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)
There is a ton of documentation on these sites you should focus on the grid sections:
http://foundation.zurb.com/docs/components/grid.html
Hope that helps.
There are websites using the responsive layout. Means you have orientations/everything fixed for the mobile screens, tablets as well as full size pc/laptop screens.
They make use of a grid system.
Common ones are
Twitter Bootstrap (Two different versions having different UI and
approaches are available at http://getbootstrap.com/2.3.2/ and
http://getbootstrap.com/) This one's my favourite as its too easy to
use
Zurb Foundation
Skeleton
html5 Boilerplate
Sprout Core
Less Framework
You may pick any one you like. They all provide a basic css and javascript to handle things out nicely, a wireframe of a complete website is provided and an extremely well documented manual is available on their websites. Its actually fun and makes work faster.
Cheers!
One useful and recommanded unit is the viewport percentage length that will adjust accordingly.
for example to get a div the size of the window and another div on top of the first one:
<div id='one-page'></div>
<div id='inside'></div>
#one-page{
width:100vw;
height:100vh;
background:red;
position:relative;
}
#inside{
width:10vw;
height:10vh;
background:black;
position:absolute;
top:10vh;
left:20vw;
}
http://jsfiddle.net/xv7Yf/
This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.
When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.
Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?
Did you try the new grid options?
Especially .col-xs-* should help you.
Here is a little example from the docs.
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
You can use the media query #media handheld which is, theoretically, used only by handheld devies (phones and tablets).
See http://www.w3.org/TR/CSS2/media.html
If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.
Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?
As mentioned by #tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive.
If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:
If using navbars, remove all navbar collapsing and expanding behavior.
In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3
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;
}