Need help? Check out our Support site, then


Missing content on mobile

  1. 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.

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

  3. 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!

  4. 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?

  5. 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.

  6. Oh, That's fantastic. Thank you so much!

You must log in to post.

About this Topic