I need help with my transformicon I got from [here][1].
It stays locked to a certain size even after doing things like "width:..px", etc. How would I resize this?
You can test it out at [my site][2], just log in using the username/password 22/22.
Thanks in advance!
Try to add width:100% for the image class, it will fit automatically the width of the screen.
Given below is img-resonsive style from twitter bootstrap which should make your image responsive to screen size. Additionally, you may use media queries for computer screen and set some different max-width for larger display.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Related
I'm having a problem moving a panel slightly of the page like that:
enter image description here
I tried width: 120%
it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4
Pls help, thank you
Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.
If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.
Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.
Check this out based on device size.
/* For devices smaller than 400px: */
body {
left-margin: 100%;
}
/* For devices 400px and larger: */
#media only screen and (min-device-width: 400px) {
body {
left-margin: 50%;
}
}
Take a look at W3's Informative Series on responsive web design.
https://www.w3schools.com/css/css_rwd_intro.asp
I recently started building sites with bootstrap and ran into a problem while creating http://en.arecotechnology.com/gunassembly.html
When the screen is minimized, the photo does not fit on the screen. The same goes for other pages on the site, including http://en.arecotechnology.com/spe2018.html (The image overlays the text when the screen is minimized)
I tried playing around with the div but nothing seems to be working.
If someone can give me a hint as to what I should do, it'd be greatly appreciated!
Try maybe changing the width so that it's 80%. That way it will always be at most, 80% of the screen width.
All I can provide with the given information. The links are dead, 404, same as Fecosos^^^
Try this too with media rules:
#media screen and (max-width:480px) {
.cupcake img {
width: [insert desired with here for certain size];
}
}
To make <img> take the maximum width of the parent add the class img-responsive (Bootstrap 3) or img-fluid (Bootstrap 4) to the images.
<img class="img-fuid img-responsive" src="/images/my-image.jpg">
img-responsive and img-fluid is a Boostrap utility that adds max-width: 100%; and height: auto; to the image. With this 2 properties you cover the majority of images problems, not allowing images to be wider that its container. Check Bootstrap's documentation, it has lots of helpful classes.
And add some media queries or again use bootstrap media queries helpers.
Try this without using a media query in your css file or style tags:
img {
max-width: 100%;
}
In theory this should work because it becomes 100% of the screen size (not 100% actual size). So the max width will just stretch to 100% of screen size instead of scrolling off.
You might need to include other css, but this code is used widely for bootstrap-based sites in conjuction with other properties.
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
When resolution lovers my background images are collapses. I tried width 100% but not worked. Here is my page and screenshot of problem.
What should I do to prevent this? a CSS2 way?
add the following class to your div id="navigation">
#navigation {
min-width: 1024px;
}
Do you mean stack down when device width is changing,
use css #media query and set diff percentage width to the container.
Do you want to make the website responsive, a better way is to use a grid system to
achieve it. such as bootstrap3 , jquery-mobile etc.
They wrote the media query for you by default. javascript also can trigger responsive
but it's heavier than pure css.
Because your site isn't responsive (Seriously? This is 2014!) You need to give the body a minimum width large enough to accommodate your content:
body {
min-width: 1030px;
}
I am working on this test page:
http://problemio.com/index_test.php
It looks ok on my laptop screen. But it looks terrible on my phone browser. Especially the images look like a mess.
What can be done to make sure the images look ok?
Thanks,
Alex
Omega has the right idea, but you want to set the width parameter as well. I usually set the width to a percentage value, and max-width to a pixel value. That way, once it has gotten past the max width, it essentially throws that aside, and only looks at the width. Something along the lines of this
img {
max-width:500px; /*Once screen size is smaller than 500px, the image reverts to the width value*/
width:100%;
}
JSFiddle
Use media queries to style elements for mobile devices. With images use percentages along with max-width and min-width values too.
#media screen and (max-width:480px) {
//CSS sizes for mobiles only
}
Don't set pixel messurements for your images and use this css instead for img tags:
img {
max-width: 100%;
height: auto;
}