I'm making my first website using Twitter Bootstrap, and am trying to understand why the logo image on my page stops scaling and jumps in size once the screen size reaches a small enough size.
The current behavior makes the site look horrendous on the iPhone.
The image file itself is a 200 x 500 px .gif
Here is a jsfiddle with the code in it: http://www.jsfiddle.net/eugip9/uyGH9
And here is the code from the div it's in:
<div class="row">
<div class="span1">
<img src="./HomePage/logo-02.gif" center alt>
</div>
<div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11">
<h1>Site Title</h1>
</div>
</div>
The image scales well down to a point, but once the screen gets small enough the image goes back to 200px x 500px
I'm using the default bootstrap-responsive.css
Every span has a 100% width when the screen is less than 767px. So, due to every image of the theme has a max-width: 100% property, you image is resizing when the screen is less than 767px.
I recommend you to resize the image to the desirable width with Photoshop (or similar). It's not always a good idea to resize images with CSS. If you don't want to do that, just put a id to the image and then put a max-width: 64px to that logo.
Related
I am a bit new to Angular Material and how to correctly lay things out.
What I am trying to do is have an image at the top of my page that is always the size of the viewable area. Something similar to https://www.rent.com. Notice the top image is exactly the size of the viewable area, no matter if I resize the screen.
Here is what I've tried so far:
html
<div class="container">
<mat-card>
<img mat-card-image src="../../assets/download.jpg" alt="Download image">
</mat-card>
</div>
css
.container {
height: 100vh;
}
This does correctly make the image the same size as the viewable area, but it does that by cutting off the bottom of the image. I would rather have the image stretch/shrink instead of just being cut off, but I am not quite sure how to achieve that.
It would appear that the full-sized background image shows up correctly if placed in Landscape orientation on mobile devices but not in portrait mode. Is there a workaround for the portrait orientation on mobile devices?
Any sort of responses appreciated!!
Site: candasixfortune.com
The parent element for the images has a position:fixed property and the images have a position:absolute property. The image is positioned relative to the page currently. You need to add a container to the images with a position:relative property.
This would be as follows:
<div id="bg-body">
<div style="position:relative">
<img src="">
</div>
</div>
Also remove the top:-50% applied to #bg-body, top:60px applied to #bg-body img, and set height to auto.
I would like to make two specific columns in the layout below, stretch the entire page height, unless their on mobile (tablet they can still stretch as most tablets are 720.
<div class="rows">
<div class="col-md-1">
</div>
<div class="col-md-10">
</div>
<div class="col-md-1">
</div>
</div>
col-md-1, right now only stretches as far as the content you put in it stretches, how ever I would like, on anything higher then 720 for it to stretch the pages full height, that is they should stretch down to the footer and then on anything smaller then 720 they should just be regular height boxes, that is "stretch to fit their contents"
How could I achieve this with out breaking default bootstrap behaviour to much.
1) In your HTML add a new class to the div(s) that you want to increase to page height
2) In your CSS, use #media-screen with a minimum width of 720px so that you're only specifying this for non-mobile devices, and within the new class specify min-height as 100%. See below..
#media screen and (min-width: 720px){
.new-class {
min-height:100%; }}
I have a problem.
I am creating a responsive header image, that would scale down to mobile and take the full width of the screen.
I would like to have done this with the img tag, and then applied a max-width of 100% but I wanted to include some text on top of this image, so chose to use a background image instead. I don't want to absolute the text over the images as this causes problems in mobile.
Also, regarding background image, I can't use background-size as this is not supported in ie8.
Is there any other way I can achieve having text over an image, where the image takes full width of the container, and full height of the image?
<div id="container" style="height: 100px; width:100px; display:block;">
<img src="some-img.jpg" style="display:block;"/>
<span style="position:absolute;">Text over image</span>
</div>
Essentially you just need to position the text over the image, within a parent.
z-index property is useful for "stacking" elements visually if you have several competing elements.
I need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.
I can get the images to show up, but I'm having trouble with CSS.
<div id="content" class="col-full">
<div id="grid">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
</div>
<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>
Any advice is appreciated for this NOOB. :-)
Try "text-align: center;" on container and "display: inline-block;" on images.
Must do the thing.
Example: http://jsfiddle.net/SvR6Z/1/
EDIT: Added ways to shrink screen.
To change images position on the page it response to window width you can do following:
Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.
If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px:
<link rel='stylesheet' media='screen
and (min-width: 701px)
and (max-width: 900px)' href='css/medium.css' />