I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
Related
I need help with a hero image to render perfectly on a mobile screen.
The Pages I need help with are:
https://www.solarwhiz.com.au/home-ventilation/
https://www.solarwhiz.com.au/commercial-ventilation/industrial-ventilation/
These pages are fine in rendered on PC or laptops.
Any guidance is deeply appreciated.
There are 3 ways.
Use img tag with width: 100% instead of background image in div;
Make div height smaller on mobile;
Get different photo for mobile and change on view resize;
The methods mentioned in the answer of #Kintamasis are completely legit and I did a +1 for that. I'd also recommend going with 1st one that will take care of full responsiveness.
If you still just want to fix it using CSS then here it is:
div.et_pb_section.et_pb_section_0 {
background-size: 100%;
padding: 16vw 0px;
}
let me know if this works for you.
I'm building a website on WordPress using the Stockholm Theme. Generally it's mobile responsive and most things work quite well.
One thing that's causing me trouble is 'buttons'.
There's an example on the following page:
https://med4eu.co.uk/proces
It doesn't display correctly on mobile. The width is too long and goes off the page. I'm trying to figure out how I can make it go into multiple lines (so text spread over 2 lines instead of 1, where necessary, to fit on the screen).
Happy to consider other solutions you might suggest as well.
Here's what it looks like on mobile:
You can view source code on the above link.
Help much appreciated, as always! :)
Add only for mobile media query this property to "a tag" button:
white-space: normal;
display: block;
height: auto;
http://dfwcgi.com/approach/white-papers
Live site, but neglected to trouble-shoot with IE before hand. All the article images (via images and links tab) are NOT responsive with IE11. Images in the body of any article do comply and are responsive. I've seen this "auto \9" on different forums, but cannot really find a solution. I've changed my custom css a few times but with no results. IT's a Rocket Theme. I've even created an IE11 custom css page...with no luck.
Would really appreciate input- this is driving me crazy.
Thanks in advance!
There are a couple of small changes you can make to improve the layout in Internet Explorer 11. For starters, you'll want to remove the width: 100% property on the DFW logo at the top of the page. Given its wide host container, this results in the image being stretched out too large:
While removing the width: 100% property resolves the DFW logo issue, it results in broken body images. At this point we see that the div.pull-left.item-image elements are actually wider than their host <article> elements. As such, we can apply the max-width: 100% property to them:
.pull-left { max-width: 100% }
This results in a restored layout in Internet Explorer 11.
Ok,
Not sure if this is THE answer, but in my master IE css page I added this:
img {
width: 100%;
}
http://dfwcgi.com/templates/rt_chimera/css/master-ie11.css
This affects a few other images in the site, but was the best I could come up with for now...open for suggestions...
Thanks again!
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice