this is my first post here. I am beginning my journey with css and html. I'm struggling with putting two responsive images next two each other that would act as buttons. What I am trying to get at is that all content is displayed on single page (without scrolling) and that the no matter the size of the screen it is always filled. Then with portrait mode on mobile screens it would display after each other.
This is how far I got already: http://test.fulfeal.co.uk/shop-intro/
I can't figure out whether it is to do with image size (the actual image is going to be a picture) or maybe with corresponding div sizes.
Thank you in advance for any help!
In order for the images to take up the full page height, first make sure that you have the following:
html, body {
height: 100%;
}
This will make sure your content can actually take up the full height of the page. Then, your images should also have their height set to 100%.
For the images to show up on top of each other for mobile, you'll need to use css media queries and then set the images to display: block; width: 100%.
Related
I am having a problem with the positioning of elements on my page.
When I try to open the website on an different computer with an different screen size it gets kind of messy.
That same happens when I resize my window. Certain elements stack in each other. Every element is positioned as absolute.
I greatly appreciate any help!
Without seeing you code, it is kind of hard. But I'll try to guess the answer.
You probably have set some width, define the total width of your elements and set that a minimum width of the body. Then when the viewports size is smaller, scrollbars will appear.
Add this to your CSS:
body {
min-width: 800px;
}
Sharing some code would be good.
To handle different screen size you might have to make your site responsive. A responsive layout uses percentages instead of pixels for defining layout element sizes. If you are creating a new page you could try BootStrap http://getbootstrap.com/. Bootstrap will make your layout look the same across different screen sizes.
I want to overlay a form with fields on to an image. Essentially I have created a picture that resembles and artist's desk. I have uploaded the image here:
(source: saeedalkhirbash.com)
I want the "Personal Details" section to be on top of one part of the image (post-its on a desk) and the remaining "Information section" on top of the graph paper on the desk. I have all the fonts etc already.
I have tried two methods:
method1: Coding my image as a background-image. This is easy to get form elements on top. The problem is that I cannot work out how to make the image do both of the following:
retain its proportions, with the width equal to the device width (and height scaled to retain the image's proportions);
and always show the full height and width.
I have tried adjusting the background size in %s, auto, and using cover, contain - no combination seems to work.
method2: I can make my image fit nicely with very simple code:
<img src="*.png" style="width:device-width">
and this works great. Unfortunately I cannot work out how to overlay the form elements. I have tried using z-index:1 as below, but this achieves nothing... (I have tried for both the form and fieldset attributes.
<form style="z-index:1"><fieldset> input blah blah </fieldset><form>
How can i do this ?
using a background image will be the easiest way to go. I think you will have issues with scale when viewing on a mobile device depending on how many fields you are planning on using and where.
By setting the form position to relative, and then any fieldsets to absolute, will allow you to posistion them accurately.
Your css for the background, so that it scales correctly, would look something like:
background: url('http://www.saeedalkhirbash.com/backgroundfinally.png') top left / 100% 100% no-repeat;
By setting the width of your form to be relative to its container, it will resize as the screen size changes. Using media queries is an easy way to resize based on device/screen width.
#media only screen and (max-width : 480px) {
div{width:300px;height:300px;}
}
Here is an example code pen for you - http://codepen.io/lukeocom/pen/bfeGC/
Resize the window so that it is less than 480px wide and see what happens...
For a version of the above demo that uses a relative width - http://codepen.io/lukeocom/pen/jBxzI/
Hope this helps
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.