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.
Related
I'm totally new to CSS3 and I am having trouble with images...
In the desktop web it's working fine with big pictures and texts about 1/10 its height
but on mobile devices the images are too big to be displayed and the texts look so small since the screen is zoomed out.
So I want the picture to be cropped at sides keeping the height as original.
I'm using bootstrap so it'd be better if there was a fancy way to deal it with bootstrap classes..
sorry for the easy and possibly duplicate question I couldn't find one though
Since you are using bootstrap. there is a class in bootstrap.css called
".img-responsive"
I would suggest you to add this class to your img tag
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.
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
I am experienced at creating advanced CSS sprites by hand, but I now find myself wondering if it's possible to have one image of vertically repeating background as well as a second image of horizontally repeating (different) background, contained in the same sprite?
It would seem logically impossible, if both images have to truly repeat, I mean think about it, you cannot specify a cropped area for the repeat, so they each would expand the image to where the vertical graphic would appear in the horizontal background and visa-versa.
But I just wanted to make sure I am not missing out on some kind of trick that I am not aware of - thanks for any suggestions or examples to explore.
If you are not certain what I am describing, draw a horizontal line across a paper and now draw a tall vertical line elsewhere on the paper. Now imagine one image repeating across the horizontal and a different image repeating down the vertical. Now try to imagine a sprite that could hold both images and the css rules each would use. It's not possible based on what I have learned but maybe there is a trick I don't know.
Short answer: not possible. :)
What I always do in your case:
Use two:
for vertical repeats
for horizontal repeats
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.