Two functions need to be called based on the screen width.
Here is one attempt:
var winWidth = $(window).width();
var sections = function() {
$('.image').each(function(){
var $this = $(this),
x = $this.find('img').width()
$this.width(x);
});
};
var sectionsMobile = function() {
$('.image').find('img').css({
'height': 'auto',
'width': '100%'
});
};
function checkSize() {
if (winWidth >= 800) {
sections();
} else {
sectionsMobile();
}
}
jQuery(window).on('load resize', checkSize);
Although the CSS is applied when the page loads, it does not switch between functions when resizing within the 800px boundary.
To see the full demo visit: http://codepen.io/sol_b/pen/PzgdWy
Your assistance is greatly appreciated.