I added a jQuery Toggle function and now my CSS responsive code has stopped working

Question

I originally had one column of the latest news on my homepage under the div class - .latestNews.

However I have since decided to add a 2nd page of news that users could toggle between using a button and jQuery. Now that I have implemented this, I am a bit stuck in how to make it "hide" when viewing from a mobile device.

I originally had some CSS code to simply hide the div when viewing on a screen smaller than 766px, but I think the code is now clashing with the new jQuery code.

This is the jQuery:

<script>
    $(document).ready(function(){

        $('.page2').hide();
        $("#buttonPrev").toggle();

        $("#buttonNext, #buttonPrev").on('click', function() {
            var currentPage = $(this).attr('id') === "buttonNext" ? $('.page1') : $('.page2');
            var nextPage = $(this).attr('id') === "buttonNext" ? $('.page2') : $('.page1');

            currentPage.fadeOut('slow', function() {
                nextPage.delay(100).fadeIn('slow');
            });

            $("#buttonNext, #buttonPrev").toggle();
        });
    });
</script>

Since adding this the column no longer hides in mobile view

The CSS:

/* Mobile devices */
@media screen and (max-width: 766px) {
    .row .left {
        display: none;
    }

The HTML:

        <!-- Latest News -->
        <div class="left" style="display: block;">

            <h class="latestNews">Latest News</h>

            <div class="page1">
                <a href="index.html">
                    <img src="images\N-Dubz.jpg" alt="Image of N-Dubz" style="width: 300px; height: 237px; object-fit: cover;">
                    <p>N-DUBZ TO SURPRISE FANS WITH FREE POP-UP GIG AT BOXPARK WEMBLEY</p>
                </a>
            
                <a href="index.html">
                    <img src="images\Shxts-N-Gigs.png" alt="Image of Shits & Gigs cast" style="width: 300px; height: 237px; object-fit: cover;">
                    <p>MOBO Awards hosts confirmed</p>
                </a>
            
                <a href="index.html">
                    <img src="images\Steff.jpg" alt="Image of StefflonDon" style="width: 300px; height: 237px; object-fit: cover;">
                    <p>STEFFLON DON AND CHIVAS REGAL DROP WHISKEY BOTTLE </p>
                </a>
            
                <a href="index.html">
                    <img src="images\M-Huncho.jpeg" alt="M-Huncho Album Cover" style="width: 300px; height: 237px; object-fit: cover;">
                    <p>M HUNCHO DELIVERS BRAND NEW PROJECT 'MY NEIGHBOURS DON'T KNOW'</p>
                </a>
            </div>
            
            <div class="page2">
                <a href="index.html">
                    <img src="images\Meekz.jpg" alt="Image of Meekz" style="width: 300px; height: 237px; object-fit: cover;">
                    <p>MEEKZ DELIVERS NEW PROJECT 'RESPECT THE COME UP'</p>
                </a>
            
                <a href="index.html">
                    <img src="images\Mobos_Logo.jpg" alt="MOBOS Logo" style="width: 300px; height: 237px; object-fit: cover;"><br>
                    <p>MOBO AWARDS SHOW HOSTS CONFIRMED</p>
                </a>
            
                <a href="index.html">
                    <img src="images\Jaz-Karis.jpg" alt="Image of Jaz Karis" style="width: 300px; height: 237px; object-fit: cover;"><br>
                    <p>JAZ KARIS DELIVERS SOULFUL NEW EP 'DEAR JAZ'</p>
                </a>
            
                <a href="index.html">
                    <img src="images\Ice_Spice.jpg" alt="Image of Ice Spice" style="width: 300px; height: 237px; object-fit: cover;"><br>
                    <p>ICESPICE SUED OVER COPYRIGHT ALLEGATIONS</p>
                </a>
            </div>
            
            <button id="buttonNext">Show Next</button>
            <button id="buttonPrev">Show Previous</button>
            
            </div>

Answer 1

Alright, so you're facing an issue where the column is not hiding on mobile devices since you added the jQuery code for toggling between two news pages. It seems like the jQuery code is not directly affecting the visibility of the .left class, which is used in your stylesheet to hide the column on screens smaller than 766px.

To fix this, you need to adjust your jQuery code to toggle the visibility of the .left class. Here's the modified jQuery code:

$(document).ready(function(){

$('.page2').hide();
$(".left").hide(); // Hide the .left column initially
$("#buttonPrev").toggle();

$("#buttonNext, #buttonPrev").on('click', function() {
    var currentPage = $(this).attr('id') === "buttonNext" ? $('.page1') : $('.page2');
    var nextPage = $(this).attr('id') === "buttonNext" ? $('.page2') : $('.page1');

    currentPage.fadeOut('slow', function() {
        nextPage.delay(100).fadeIn('slow');
    });

    $("#buttonNext, #buttonPrev").toggle();
    $(".left").toggle(); // Toggle the visibility of the .left column
});

});

This adjustment ensures that the .left column is hidden when the page loads and gets toggled along with the page transitions triggered by your buttons. The .left class is the one you used in your CSS to hide the column on screens smaller than 766px.