Public Forums 71,145 posts

[touchdown Friend touchdownJoin date: November 2013Posts: 40Downloads:0Uploads:0 Thanks: 13]

#197940

So while the intro articles’ images look great on the large and medium screen they look terrible on the small screen. They look ok on the extra-small screen.

On the small screen the image fills the full width of the screen which is about double the image original size, thus making it pixelated. Does anyone else have a solution apart from moving the intro articles into modules at the bottom of the layout?

I would like these intro images to stay side by side and simply get smaller as the screen size gets smaller.

http://borkholderarchery.com

My layout is 2 columns for the intro articles and the images are 235×235.

Thanks for any help or suggestions.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#535817

Do you mean these 2 images: http://prntscr.com/3kuw3j?

In device with small screen resolution, it will be fluid to display in 1 column to have a nice look. If you want to display side by side, you can create a new CSS file called custom.css in /templates/purity_iii/css folder and add this css rule:

@media (max-width: 320px) {
.blog-featured .items-row .item {
width: 160px;
float: left;
}
}


[touchdown Friend touchdownJoin date: November 2013Posts: 40Downloads:0Uploads:0 Thanks: 13]

#536090

Sorry it took so long to get back with you but I tried that code but it didn’t help. I like how it looks on large and medium screens but not how it looks on small and extra small screens. See the image: https://www.flickr.com/photos/68329121@N05/14237733454/in/set-72157644364340427

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#536151

Could you send me screenshot of how you want it should be in small screens?

[touchdown Friend touchdownJoin date: November 2013Posts: 40Downloads:0Uploads:0 Thanks: 13]

#536252

Thank you @saguaros

How the small screen should look.
How the extra-small screen should look.

The text beneath the photos on both the small and extra-small screens should be the same as the rest of the text in the article. Does that make sense?

Thanks again.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#536495

You can try with this css rule:

@media (max-width: 768px) {
.blog-featured .items-row .item {
width: 325px;
float: left;
}
}

@media (max-width: 320px) {
.blog-featured .items-row .item {
width: 160px;
float: left;
}
}

[Author]

Posts