Hey guys, I have been struggling trying to change the height of an image in the slider on my website. I'm trying to get the image higher. Link to the site: http://www.jnerecreatie.nl/aanbod/33-Chalet-EUR56/ I'm trying to get the position of the image to automatically move, to a max-width:500px. The image in the slider should also be responsive. If anyone tries to have a look at this, thank you . Any help is very welcome because I can't seem to figure it out. Thanks!
Hi. All I can see from here (Firefox) is that the slider is quite responsive, but the original (actual) image in last slide (which shows a laptop, not a bike) seems to be unproportionate. Is that why you need to make it taller than the rest? If it is then maybe changes should be made to that original image, not through CSS? Hendra
First, I'd probably scrap that template altogether. There's so much going on there really for nothing. In the life of me I can't understand what this is all about. It's a nightmare: <link rel='stylesheet' id='wpl-google-font-css' href='//fonts.googleapis.com/css?family=Droid+Serif%3A400%2C700%2C400italic%2C700italic%7COpen+Sans%3A300italic%2C400italic%2C600italic%2C700italic%2C400%2C300%2C600%2C700%7CScada%3A400italic%2C700italic%2C400%2C700%7CArchivo+Narrow%3A400%2C40%7CLato%3A400%2C700%2C900%2C400italic%7CBenchNine%7CRoboto%3A400%2C700&ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='wpl_frontend_main_style-css' href='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/css/frontend.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='contact-form-7-css' href='http://www.jnerecreatie.nl/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.4' type='text/css' media='all' /> <link rel='stylesheet' id='sohohotel-style-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/style.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='colour-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/css/colours/blueblack.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='superfish-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/css/superfish.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='prettyPhoto-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/css/prettyPhoto.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='flexslider-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/css/flexslider.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='responsive-css' href='http://www.jnerecreatie.nl/wp-content/themes/sohohotel/css/responsive.css?ver=4.4.2' type='text/css' media='all' /> <link rel='stylesheet' id='qns-opensans-css' href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic&ver=4.4.2' type='text/css' media='all' /> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.modernizr.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.jquery.chosen.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.jquery.mcustomscrollbar.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.ajaxfileupload.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/frontend.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.jquery.spin.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/wpl.commons.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.handlebars.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.jquery.qtip.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/realtyna/realtyna.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/realtyna/realtyna.utility.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/realtyna/realtyna.lightbox.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/realtyna/realtyna.tagging.min.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.jnerecreatie.nl/wp-content/plugins/real-estate-listing-realtyna-wpl/assets/js/libraries/wpl.jquery.timepicker.min.js?ver=4.4.2'></script> <script type='text/javascript' src='//maps.google.com/maps/api/js?sensor=false&ver=1'></script> <link rel='https://api.w.org/' href='http://www.jnerecreatie.nl/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.jnerecreatie.nl/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.jnerecreatie.nl/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 4.4.2" /> <link rel='shortlink' href='http://www.jnerecreatie.nl/?p=54' /> <link rel="alternate" type="application/json+oembed" href="http://www.jnerecreatie.nl/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.jnerecreatie.nl%2Faanbod%2F" /> <link rel="alternate" type="text/xml+oembed" href="http://www.jnerecreatie.nl/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.jnerecreatie.nl%2Faanbod%2F&format=xml" /> <meta name="keywords" content="Chalet, Te koop, 1015" /><meta name="description" content="Chalet Te koop Listing ID 1015" /> Code (markup): Usually, the images can be changed via the img div somewhere in your css. Something like: .your_wrapper img { width: 100%; max-width: 800px; max-height: 250px; display: block; } Code (markup): But honestly, I'd discard that template and start everything all over again. You'll always have to deal with the mess.
Thats why i can't figure it out anymore. I follow your steps and start all over. Thanks for your time. (please delete this)