I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
Related
I have searched for this question, but I can't find a good solution, so maybe you guys can help me.
Link
If you look at this site, you can see that in each side (left/right), there is a banner. The width for these two are 160px each. the website is using the WHOLE screen at any givin time, but the ads are still 160px no matter what, and the game in the middle is the one shrinking to fit the screen, both vertically and horisontally.
How can I achieve this, and is it even possible to do in css alone? I've looked their code, but I can't really figure it out.
Banner provided by thirt pars (like AdSense) can't generally be resized for an obvoius reason: the advertiser provides, one or more images for the banner, possibly of different sizes; but that sizes are generally not intended to be "scalable" 'cause in that case the result might suck...
You can scale the container, of course, but you are asking about ADS...
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?
You will need to adjust the styles for check-rates_btn and titleimg accordingly using CSS Media Queries.
Unfortunately, you are using Drupal and have too many cached CSS files for me to look through, but the ones I did look at (layout.css and system.theme.css) only had a few specific media queries that were not altering these classes.
Hope this helps.
I'm building some responsive WP themes with the idea/hope to make it super-easy for an end-user to setup a simple site that looks good. This is my first attempt at learning responsive as well and can't quite get a complicated logo / company name / tagline feature worked out. Proportional, centered, unknown widths, oh my!
You can see a mockup of some of the different situations we'd like to handle at http://screencast.com/t/G8O1G4aY. The left shows a rectangle logo, a square logo, then a square logo with some text and a square logo with more text.
The right side shows how we'd like the responsiveness to look, as the screen gets smaller. The image starts reducing from a max-height of 200px-ish to 100px-ish and the font-size starts reducing as well.
Hoping to not have to rely on breakpoints to set the sizes. We've already accepted that were going to have a 'you have JS turned off, its ugly this way' message, so something like http://simplefocus.com/flowtype/ to adjust the font-sizes would be quite alright.
Can it be done?? Can get into more javascript to solve if needed, but hoping for as much CSS handling as possible.
Thanks much for any help! Keep getting this piece or that - but can't get them all together.
Philip
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
I am having a problem where the background image that is centered aligned, and repeated vertically, is only breaking on the Latest News page.
I can't seem to find why it would be breaking, especially as it is fine on every other page within the site, and there is no section of the page that differs in sizes etc.
I have used firebug to inspect all aspects of the page but still can't find what is causing the problem, any help would be much appreciated.
It looks like the background image is placed twice on the page. Since you use one that's 2000 x 2000, the cut comes to early on the page, to make it a problem with the top/bottom not fitting.
Another thing is that the top/bottom doesn't fit, so you will get that cut for all pages longer than 2000 px, which is the reason for the second cut on the page. You should instead use a much smaller image, like 10-40 px high, that will fit when repeated. That will give your users a faster page speed. It might also fix the problem, or help you track down the reason.
I think the page is to long for one image, the it repeat.
But, look at you image, it seem that the top of image is'nt correctly connected with the bottom. (Y know what I mean?).