search

aerohub / hugrid

Hugrid (Hugo+grid) is a simple grid theme for Hugo. It's a kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on.
MIT License
165 stars 79 forks source link

No way of showing "full" image on small screen #8

Open pseudomonas opened 7 years ago

pseudomonas commented 7 years ago

Expanding a thumbnail on a small screen leads to showing the title/description/button, but no full image (or link to full image or anything.) This seems to be the case both on mobile devices and on desktop windows sized to be narrow.

rlingineni commented 6 years ago

+1

charly3pins commented 6 years ago

Hi, I've checked the css that is used for show/hide the detail image and it's using @media queries. This code is the specific one:

@media screen and (max-width: 650px) {
    .og-fullimg { display: none; }
    .og-details { float: none; width: 100%; }   
}

So, you can create your custom css in a new file (f.e.: css/extra1.css) and add this block there:

@media screen and (max-width: 650px) {
    .og-fullimg {
        display: block !important;
    }
    .og-details {
        float: left !important;
        width: 50% !important;
    }
}

You can also modify the width and the text display etc.. but this is the main idea.

Hope it helps.