Missing content on mobile

  • Author
    Posts
  • #2016402

    fanscorner
    Member

    Hi,
    I am using the Arcade theme which should be responsive but my site looks awful on mobiles. The top page container is missing as well as titles and excerpts of all posts. There are huge gaps between images. I tried to fix it using @media screen in my CSS but cannot see any changes. Could anyone help please!

    The blog I need help with is fanscorners.com.

    #2016458

    fanscorner
    Member

    I think I found the problem. I had to remove some CSS rules I put there for desktop. It looks nice now.

    #2016469

    hallluke
    Member

    I noticed that the current positioning for the homepage image widgets (the club badges) isn’t great for tablet and mobile sized screens as it moves them in to a single column and it already takes a fair amount of scrolling to get to your content. You can tweak this a little bit by setting different numbers of columns for different screen sizes. Here’s an example which keeps the three columns you have now except on tiny screens where it jumps down to 2 or even 1 column.

    #home-page-widgets aside {
        padding-left:0px!important;
        width:33%;
        float:left;
    }
    
    #home-page-widgets aside div div {margin:0 auto;}
    
    @media (max-width: 600px) {
        #home-page-widgets aside {
            width:50%;
        }
    }
    
    @media (max-width: 400px) {
        #home-page-widgets aside {
            width:100%;
        }
    }

    It might be an even better idea to resize the images for mobile viewers because otherwise it will take forever for them to get to the content of your site and you may find people give up and go somewhere else!

    #2016473

    fanscorner
    Member

    hallluke, thanks a lot! Yes, you are right – the layout looks great on desktop but not on mobile. I am thinking of removing the Home Top Area for mobiles and tablets. I have these links in my main menu any way. How can I do that?

    #2016474

    hallluke
    Member

    You could use something like this to hide those images when the browser reaches certain sizes:

    @media (max-width: 992px) {
      #home-page-widgets {display:none;}
    }

    Your theme currently has breakpoints at 1200, 992 and 769px.

    #2016475

    fanscorner
    Member

    Oh, That’s fantastic. Thank you so much!

The topic ‘Missing content on mobile’ is closed to new replies.