I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
Related
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
There are multiple places on our website where we are using .svg's with the background image rule to create shapes.
For example:
&:before {
bottom: auto;
height: 4rem;
content:'';
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('img/layout/press-before.svg');
background-size: 100%;
background-repeat: no-repeat;
#media screen and (max-width: $viewport-xs) {
height: 2rem;
}
#media screen and (max-width: $viewport-sm) {
top: -.1rem;
}
}
This works well on desktop on all resolutions.
But on several mobile devices using chrome there is an issue when the adjected block has the same color.
There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.
Things I've tried:
+ use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference)
+ moving the image up sligthly (line remained)
+ making it slightly larger (line remained)
For reference, see the following images.
issue example 1
issue example 2
Any suggestions are greatly appreciated!
The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.
I tried this before I posted this question here and it didn't work.
This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).
Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.
How do I make a large image smaller via CSS, with the image located on a JSP page?
I have tried different height, width, size and-so-on keywords, but nothing seems to work.
It is possible though to move the image around, but can't figure out how to make it smaller.
The picture is saved in my project (it's not from an url).
HTML:
<div id="AUlogo">
<img src="aarhus-university.png">
</div>
CSS:
#AUlogo{
margin-left: 23%;
}
Hope my question is clear!
Try like this: Demo
#AUlogo img {
max-width:100px;
}
Specify the value in max-width as you need.. Hope this helps!!
try using
max-width: 90%;
and
max-height: 90%;
that should work, and when you did just height did you change the width or vice versa because if you dont change it with the same ratio as the img had it might mess up so try
height: 55px;
width: auto;
Simple way is to use CSS Resize Property
#AUlogo {
resize: both;
overflow: auto;
}
For resize Property you can use different values like
resize:both,horizontal,vertical,initial;
You can have any one of the property values to resize your image
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
I´m making a website with the following css. Everytime I change the resolution on my computer, the text under the #info div gets mangled up. How can I fix that? Thanks.
#container {
background-image:url('pic.png');
height: 541px;
width: 1020px;
margin: 0 auto;
}
#musicplayer {
margin-top:90px;
display:inline;
}
#info {
position: absolute;
top: 29em;
left: 38em;
}
if you can go on the javascript side, use something like jquery and recompute your lengths. There is a stackoverflow entry for this:
jQuery Screen Resolution Height Adjustment
If you can not use javascript, I suppose using percentage to set top and left is an easy fix:
http://www.w3schools.com/cssref/pr_pos_top.asp
This bits of javascript also shows you how to change the font size:
http://www.shopdev.co.uk/blog/text-resizing-with-jquery/
since I would say this is related to the question.