I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue.
When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version, it doesn't work. I want a mobile version with one column and then switch to two columns when the window size exceeds 400px.
After numerous changes, this is what my current code looks like:
$('.slide ul').slideUp();
var windowSize;
windowSize = $('.wrapper').width();
$(window).on('load', checkSize());
$(window).resize(checkSize());
function checkSize(e) {
if (windowSize < 400) {
mobile();
} else if (windowSize > 400) {
noMobile();
}
}
function mobile(e){
$('.especial').hide();
$('.toggle').on('click', toggleMenu);
}
function toggleMenu(e){
$('.slide ul').slideToggle();
e.preventDefault();
}
function noMobile(e){
$('.lista').show();
var selectedList;
selectedList = $('.elegidos').html();
$('.especial').prepend(selectedList);
}
Thank you for your help!