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
Related
So Im making a website and I have included a .css file to be able to move things more freely. I have made some items with position:relative and others I have used the absolutePanel(). I want to keep my layout as it is but when the window is resized it looks horrible. Any suggestions?
You should try to be a bit more specific on your question.
Some general tips though are instead of using pixels for the sizes of divs etc.(static design) use either percentages, vh & vw (view height and view width of the window that are being displayed respectively) or media queries #media (responsive design). To make your life a lot easier with responsive design though check out Bootstrap, and especially its grid layout system.
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 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'm using twitter bootstrap to create a website for desktops and mobile phones. I want the login form to be centered both in the x direction and in the y direction.
So if the grid was 100 x 100, then the form would be at 50,50.
I'm able to get the form somewhat to the center of the screen in firefox using text-align: center; but firefox puts it a bit off to the right.
What can I do to get to the center?
Here is my HTML
Here is my bootstrap.css
Try using margin:auto; on the <div> that contains the form.
That's an awful lot of nested div tags in there, though I know it's partly Bootstrap's fault! One thing I would stress is to make use of the ones that you already have to use with Bootstrap rather than adding new ones to change positioning, because that will create lots of headaches.
After playing with this, I didn't come up with a definite solution, but here's what I think:
Read up on CSS media queries... this will make the solution to your
desktop > mobile problem much easier!
Don't use CSS for a vertical alignment. Divs aren't table cells
and can't really act like them. A small JavaScript that sniffs out
the width of the screen and does the positioning math is better. A
quick Google search will bring up plenty.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.