[Resolved] Mobile Display

[Author]

Posts

[jackC-6]

puppies.co.uk is my new site.

Can you help me on puppies.co.uk/dog-breeds

looking to fix 2 things:

1. the code to crop to a thumbnail size of every image isnt working (this also isnt working on /puppies-for-sale)
2. How can i get it to display on mobile where every item falls underneath eachother- instead of cramming in side by side?

[Christian Cox]

1. the code to crop to a thumbnail size of every image isnt working (this also isnt working on /puppies-for-sale)
Please copy + paste the code you are using here for me to review.

2. How can i get it to display on mobile where every item falls underneath eachother- instead of cramming in side by side?
It looks like your View is set up with a table or table-based grid loop structure. That structure isn't really ideal for a responsive design where the columns change at different screen sizes. You could use the Bootstrap grid system instead, and apply their responsive grid classes to each item in the loop. We have some more information about these different loop styles here, along with a link to the Bootstrap grid documentation:
https://toolset.com/documentation/user-guides/view-layouts-101/
https://getbootstrap.com/docs/3.3/css/#grid

[jackC-6]

I am using code: {!{types field='photo' alt='%%ALT%%' title='%%TITLE%%' size='thumbnail' align='left' resize='crop'}!}{!{/types}!}
It worked when I was in development mode but now doesnt

Okay i will have a go at bootstrap and let you know.

[Christian Cox]

Please go to Toolset > Settings > Custom Content and try clearing the image caches, then check both boxes, save, and try again. It looks like the images are loading from an IP address and not your regular URL, so this could be part of the issue.

[jackC-6]

thanks thats fixed it- Can you take a look at /puppies-for-sale and work out why some thumbnails are odd shapes?

[Christian Cox]

It's because your theme includes some CSS that uses display: flex on the class "row". I'm attaching a screenshot here. If I disable that style, the columns become fixed widths. You can probably override their style with some more specific CSS. Wrap this View in a div that has a unique CSS class, then target .row as a descendant and apply display:block;

HTML:

<div class="not-flex-row">
  [wpv-view name="your-view-slug"]...the rest of your code...
</div>

CSS:

.not-flex-row .row {
  display: block;
}

[jackC-6]

Thanks- where do I wrap it?

On the edit view section??

[Christian Cox]

I'm not sure, how do you insert this View into the page? Is it a shortcode in a Content Template, or part of a post's content body, or a widget, or something else?

[jackC-6]

its a shortcode on a page in a text element

[Christian Cox]

Wrap the div around the View shortcode, like this:

<div class="not-flex-row">
  [wpv-view name="your-view-slug"]
</div>