I am working on a project which requires drawing something akin to a letter 'T' in HTML and making it responsive.
--------IMG-------------------------------------
|
|
|
I have an image right at the junction point.
I would like the whole thing to be responsive.
Unfortunately, I cannot share the code because the diagram details are proprietary.
But the issue that I face is the following:
When I resize the window, the vertical line moves at a different speed than the horizontal line and hence the vertical line is no longer under image.
What kind of strategy should I follow in my CSS and HTML to ensure that this is responsive?
I am very new to HTML and having basic knowledge of making images responsive and so on.
Thanks!
If you use this code on your img it will make it responsive
img {
max-width:100%;
height:auto;
display:block;
}
That will ensure your image scales as your browser shrinks.
To get the line to stay in the same position make sure it's within the same container as the image. You could then just adjust the margin of the line.
Below is a fiddle of this.
https://jsfiddle.net/15fmcs5e/
As you will notice as your resize the browser the line stays in place as the image shrinks. When the display starts getting to small the line stops moving over. At this point you would need to use a media query to adjust how far over you want the margin on the line.
That could look something like this
https://jsfiddle.net/L1bbfxdq/1/
#media only screen and (max-width: 836px) {
.line {
margin-left:60px;
}
}
You could also just make the .line class have a percentage based margin from the get go and save yourself doing the media query. Whatever works best for you.
Related
I want the position of the banner image to change on smaller screens - max-width 414px. I want to show the product (a building) which is on the far right of the image. On wider screens the building appears.
I've made it work in the developer tool by changing the position in the style : left:-1077.383px; .
Here is the code where the banner is located (with the adjusted left position). I'm having a difficult time display the code block, so I hope these will suffice:
Screenshot of code
view-source:http://digitalponddesign.com/utestua/utestua.html
In my media query, how do I target this element so I can adjust the left position on screens smaller than 414px.
I have targeted the image-container content-fill and first classes, to no avail :(
How can I target this element in my media query to make this work)
I have created a media query:
<style>
#media only screen and(max-width:414px) {
/* not working */
.image-container {
left: -1077.383px;
}
}
</style>
The website is https://utestua.no/
Thanks in advance :)
Squarespace allows you to set the focal point of an image so that, as screen and containing-element sizes change, a specific part of the image can remain in view.
In the place where you add the image, you will see a small circle that defaults to the middle of the image. That circle can be dragged around. In your case, drag it to the area with the building (though you'll probably want to keep it vertically centered, you can play with it a bit until you get it where you want it).
If, however, you are sure you want to leave the focal point in the middle but override the position values via CSS, then you could use the following, which will keep the image positioned so that the right side is always visible:
.image-container[data-url-id='top'] img {
position: absolute !important;
right: 0 !important;
left: auto !important;
}
Trying my hand at some responsive design and got images to scale well enough and never so big that it gets cut off by the edge of the browser; however, when it's so small that it doesn't quite (or even remotely) reach the browser edge it doesn't look too great in my opinion, in particularly when it's between full size and just the same size as text paragraphs.
I want to give these responsive images a darker background that always extends out the left of the image all the way to the edge of the browser and is the same height as the image.
Without background:
What I'm trying to do:
Since these images are responsive and of varying aspect ratios as well they never have the same height so I'm not sure how to accomplish this.
P.S. I've tried border-left but that pushes the image itself to the right (absolute positioning didn't help) and outline can't be assigned to just one side.
I am not sure that I have understand your question clearly. Anyway I have come up with some idea about your requirement. Check my fiddle below for the sample. I didn't concentrate in the responsive area, but it will give some idea on your way.
#header, #bottom
{
color:#fff;
text-align:justify;
padding-left:30%;
}
#content
{
background-color:#000;
text-align:right;
}
Have a Fiddle!
I am making a responsive website where I have used the img attribute in the HTML markup so that images scale nicely, to the point where they are moved about with media queries.
(Similar to this fiddle http://jsfiddle.net/QfDv5/ except I have used seperate images.)
However, for ease of updating, I want to add the image paths to the css file instead of the HTML markup. I thought the img-background attribute would be good to do this. That said, I want to stay away from 'background-size' attribute since older browsers don't play nice with it.
I thought of making an element within each of the scaling class divs. The div scales horizontally IF I declare a fixed height, but I cannot seem to get it to scale vertically automatically. I added:
#test-2{
width:100%;
height:100px;
background-image:url("http://www.desibucket.com/db2/01/26039/26039.jpg");
}
jsfiddle
What am I missing in getting the new element to scale without a fixed height?
How can I get the actual background image to scale with the new element?
Thanks
solution is using media queries and set the exact height you want.
media screen and (min-width: 1234px) and (min-height:700px) {
image {height: xxxpx;}
}
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'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design