So I'm sorta new to CSS and Drupal, and I am trying to figure out a way to make the body be a minimum size. Here, you can take a look at the site I have at http://raptorshop.com
As you can see, the footer is huge and takes up half the screen. Would I just insert a box of sorts (maybe a wrapper?) and make it a minimum size, and put it in the middle?
Any ideas appreciated.
minimum is min-font-size
btw the link you provide seems like just to your host maybe ?
Nevermind, found the "min-height" thing.
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 using bootstrap. Everything is pretty much set, but table.
When I'm seeing my website with smartphone, it shows with responsive design but table looks pretty messy.
All the contents stick out from the edge of table.
What would be the best way to handle this kind of thing?
Anyone has any idea???
Update:
you need to give it a min-width. This happens all the time. If you look in your browser and make it smaller you can see the same problem when you scroll to the right. The background does not the scrollarea unless it has a width.
If you take a peek at the page I'm trying to create, here, you'll see the issue I'm having pretty quickly. I can't figure out why my send button isn't lined up or sized properly. I've tried changing the height and width of the button, and I've tried adding a bottom margin. The next thing I'm going to try is to change the line height, for the size. I'm more worried about not getting everything aligned, though. As long as everything lines up, it looks nice to me. Can someone help me figure out why it isn't aligned? Also, please ask if you need any additional details.
I've also tried display:inline; and various float settings.
You need to float both the .button_outside_border and the .status_text to the left like in this example. You still have a bit of cleaning up do to get it pixel perfect but this should get you underway.
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.
Here's the JSFiddle (disregard the differences with picture below):
http://jsfiddle.net/stapiagutierrez/y2PhX/
I'm supposed to have something like this in the white background, but the images in the center and right column seem to expand outside of their domain.
Any suggestions on how to cleanly handle this situation? It needs to be nice and centered, needs to end up like the picture, I feel I'm close but can't quite get there. Thank you, learning quite a lot in this tag area in Stackoverflow.
Use pixel widths, not percentage.