Sunaina KWhy do Homepage Slider Images scale disproportionally?
Hi Dominic,
Do you have any updates in regards to DW-Focus Homepage Slide?
Site: http://www.ejnblog.org/newsite/
On my homepage (slider 1 image):
http://www.ejnblog.org/newsite/wp-content/uploads/2013/09/FENS-Meeting-2014-520×400.png
My Post: http://www.ejnblog.org/newsite/2013/09/01/9th-fens-forum-of-neuroscience-2014/
Image URL: http://www.ejnblog.org/newsite/wp-content/uploads/2013/09/FENS-Meeting-2014.png
On your homepage (slider 1 image):
http://demo.designwall.com/dw-focus/wp-content/uploads/A-London-Workshop-520×400.png
Image URL: http://demo.designwall.com/dw-focus/wp-content/uploads/A-London-Workshop.png
What am I doing wrong? Why are my images broken? I.e. showing cut off images/too big/too small and our images fit nicely?
Please review and advice.
DominicAs the design of DW Focus theme, the images size is 500 x 400 in the slider, however, you can add the image size 770 x 400 px and they still display as our demo site because the system will automatically resize and get the smaller images for the website.
We mostly use the size 500×400 for all the article images. To be specific:
– 500×400 images are used for:
Widgets:
News Slider
Featured Image
Single post và Featured Image
First article of Category Archive
– 230×130 are used for:
Widgets:
Recent news, Featured News, Popular News (If you select Medium size images)
Category (3 cols)
News Carousel
Articles on Archive page
– 110×110 are used for:
Widgets:
Recent news, Featured News, Popular News (If you select Thumbnail image size)
Category (1 col)
Regards,
Dominic
Eric TischlerI found I was having this problem also, with smaller images not filling the slider, so I edited template.css for the them (do this only in Notepad – for some reason other programs change the file in a way that makes it not work).
Change this: .carousel-inner img{max-width: 100%;}
to this: .carousel-inner img{max-width: 100%;min-width: 100%;}
so the image is exactly that 100%. When I did this all the images fit properly.
Dave Rhea
I didn’t find that code in template.css
I don’t have notepad because I have a Mac.
… ckground:#000;width:23px;height:22px;top:10px;right:0}.nav-tabs-by-select{border-width:0;background:#000;height:40px;width:100%;color:#fff;text-transform:uppercase!important;padding:10px 0 8px 10px;line-height:1;margin-bottom:20px;appearance:button;-moz-appearance:button;-webkit-appearance:button}.nav-tabs-by-select option{padding:5px;background:#fff;color:#000!important}.news-slider{background:#000}.news-slider .carousel{margin:0;float:left;width:520px;line-height:20px}.news-slider .carousel .carousel-inner .hentry{position:relative}.news-slider .carousel .carousel-inner .entry-thumbnail{position:relative}.ie8 .news-slider .carousel .carousel-inner .entry-thumbnail .gradient-ie8{position:absolute;bottom:0;width:100%;height:60%;display:block;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00000000′,endColorstr=’#000000′,GradientType=0)}.news-slider .carousel .carousel-inner .entry-thumbnail{position:relative;margin-bottom:0}.news-slider .carousel .carousel-inner .entry-thumbnail:before{content:””;width:100%;height:50%;position:absolute;bottom:0;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,#000));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00000000′,endColorstr=’#000000′,GradientType=0)}.news-slider .carousel .carousel-inner .entry-category{position:absolute;font-family:”NovecentowideNormalRegular”,Georgia,”Times New Roman”,Times,serif;font-size:11px;color:#fff;padding:10px;line-height:1;background:#ee3224}.news-slider .carousel .carousel-inner .entry-header{position:absolute;width:100%;bottom:0;padding:30px 20px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.desktop .news-slider .carousel .carousel-inner .entry-header-inner a{opacity:.7;filter:alpha(opacity=70);-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s}.desktop .news-slider .carousel .carousel-inner .entry-header-inner a:hover{opacity:1;filter:alpha(opacity=100)}.news-slider .carousel .carousel-inner .entry-meta{color:#eee}.news-slider .carousel .carousel-inner .entry-meta a{color:#fff}.news-slider .carousel .carousel-inner .entry-title{font-size:36px;line-height:42px}.news-slider .carousel .carousel-inner .entry-title a{color:#fff}.news-slider .carousel-list{float:right;width:249px}.news-slider .carousel-list h3{position:relative;margin:0;border-bottom:1px solid #222;text-align:center;text-transform:uppercase;font-family:”NovecentowideNormalRegular”,Georgia,”Times New Roman”,Times,serif;font-size:11px;line-height:40px;color:#fff}.news-slider .carousel-list h3:before,.news-slider .carousel-list h3:after{left:50%;margin-left:-3px}.news-slider .carousel-list h3:before,.news-slider .carousel-list h3:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #222;bottom:-7px;content:””;height:0;right:10px;position:absolute;width:0}.news-slider .carousel-list h3:after{border-top-color:#000;bottom:-6px}.news-slider .carousel-list .other-entry{margin:0 0 0 -1px;list-style:none}.news-slider .carousel-list .other-entry li{border-left:0 solid transparent;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.news-slider .carousel-list .other-entry li.active a,.news-slider .carousel-list .other-entry li:hover a{color:#fff;background:#111}.news-slider .carousel-list .other-entry li.active{border-left:5px solid #ee3224;overflow:hidden}.news-slider .carousel-list .other-entry h2{margin:0;font-size:14px;line-height:20px}.news-slider .carousel-list .other-entry a{display:block;padding:15px 20px;border-bottom:1px solid #222;font-family:’Bitter’,serif;color:#999}.news-slider .carousel-nav{margin:10px 0}.news-slider .carousel-nav ul{margin:0;list-style:none;text-align:center}.news-slider .carousel-nav li{display:inline-block;border:1px solid #333;padding:3px;background:#333;border-radius:20px;line-height:4px;width:12px;height:12px;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.news-slider .carousel-nav li.active a{background:#999!important}.news-slider .carousel-nav li:hover{cursor:pointer}.news-slider .carousel-nav li:hover a{background:#444}.ie8 .news-slider .carousel-nav li{margin:2px}.chrome .news-slider .carousel-nav li,.safari .news-slider .carousel-nav li{padding-top:0}.news-slider .carousel-nav a{display:inline-block;text-indent:-9999px;width:4px;height:4px;border-radius:20px;position:absolute;top:50%;left:50%;margin:-2px 0 0 -2px;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s}.weather_widget{text-align:center;font-weight:bold;text-transform:uppercase;border:1px solid #ddd}.weather_widget …
Please login or Register to submit your answer