I have a WordPress plugin installed called Slider and it does not respond to images very well on mobile at all.
I have to enter media queries for the slider to scale down and look mobile responsive, but below a specific size, it starts to cut out the sides of images if they are too big. I've been able to scale the images down for bigger sizes but below 690px it doesn't seem to work without cutting the sides off.
Here is an image of what it looks like on mobile:
If I then increase the width, the images move all the way to the right like below:
So my question is, is there a way to centre the current image?
Here is the only bit of code I think that's holding it in place, but with my width applied:
#wds_container1_0 #wds_container2_0 .wds_slideshow_image_0 {
width: 100%;
height: 100%;
float: none !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
width: 500px; }
Related
I have a series 8.5" x 11" # 72ppi magazine pages exported from InDesign as jpegs that I wish to display within Blogger posts. I want to display a 1 pixel border around each of these images so the edges of the pages are more easily discerned. I am testing the mobile version of the Blogger site in Chrome's emulator.
The images are correctly be resized to fit the mobile device; however the right and left borders are being cut off. Sometimes the page will load with one border showing, but the opposing border is then 2 pixels off screen. Sometimes when I reload the blog, or change devices, the borders might appear correctly, but then start not appearing once again. How do I make sure the images are correctly resized with the border on each side
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 612px;
height:100%;
display: block;
}
It's better to not have a fixed width if you want responsiveness to work.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 100%;
height: auto;
display: block;
}
Example (try resizing the page to see the image size changing): https://codepen.io/felipefreitag/pen/EbXxjx
Further reading:
https://www.w3schools.com/css/css_rwd_images.asp
Thanks for the replies. I slightly modified the supplied code by adding a margin. This works for all the devices in the Chrome emulator except for the two Nexus devices, which keep scaling the images so as to cut off the left and rights borders. This could be a problem with the emulator. Another solution which works on all devices is to add a 1 pixel border graphic inside InDesign and export the images with a 1 pixel border.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
margin:2px;
width: 100%;
height: auto;
display: block;
}
I have been working to get my company logo image and the background image to both resize according to the size of the screen they are viewed on. However, when I get the background image to resize properly the logo image will not change size at all. But, when I am able to get them both to resize, the logo image is then far too large and covers the width of the entire screen. Then when I change the width of the logo image to be smaller, then the background image shrinks to less than the width of the screen.
Here is the link to the landing page I am having issues with http://www.dorkdungeontestblog002.blogspot.com/
I would like the header image and logo image to produce the following effect while being responsive to different screen sizes, but as you can see by viewing the site, I am not achieving that result.
Hopeful Header and Logo Appearance
If anyone can assist me with this I would really appreciate it, I've been at it for several hours now and it's just not working. Please let me know if there is any further information I can provide as well.
This is all of the code under the Header note...
/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}
Wrote here for the editor.
.container,
#front_page_container {
width: 100%
}
In this way the countdown remain centered. But in small resolution is too big, and i don't know if this class are used in another place of the site.
My advice is to change the layout. The template you are using is not responsive at all, so you have a lot of work to make it responsive.
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">
So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
I'll be working with full-screen banners, just like this one or this other one and for this purpose I'm using a plugin in a Wordpress site.
Now I have set their respective widths to 100% (to avoid an x-axis scrolling and also to make the banners display fully on every screen size). Problem is that if you grab your browser screen to make it smaller or you open the web site on small screens (13 inch or iPads) the images displayed on banners squish.
I need the image to be cutted off while resizing and the only way I know for that is to change the banner's div class from width: 100% to width:the amount of pixels I want but in this way, obviously, if the screen from where you enter the site is smaller you'll get a x-axis scrolling and if it's bigger you'll have the banner cutted of when it reaches the amount of pixels previously set up in it's width.
How can I get the images not to squish, but to get cutted off making it's div width display 100% on any browser?
Banner's actual code:
.bannercustom {
position: relative;
z-index: 11;
left: -2px;
width: 100%;
top: 0px;
float: left;
height: 440px;
}
Do you have the ability to set the banner as a background-image to a div? Then you can set the background-scale to 100% and let the div resize as needed.
Why not just use: width:auto; ?
Should work.