Squashed Images Mobile View

Permalink
Hi,

Iʻd love some help on fixing squashed images on mobile (portrait) view. On desktop the images are fine. I have other images that look good on mobile view.

Is the quality of the images?

These pages donʻt look good on portrait mobile view
http://www.oahufringe.com/press...
http://www.oahufringe.com/about/what-is-fringe...

Would love to know what I am doing wrong. Thank you so much for your help.

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi OahuFringeFestival,

What you are seeing is caused by a bug and missing CSS.

To correct this, you need to do two things:
1. Update concrete5 to the most current version (5.7.5.6).
2. Add a CSS style using Custom CSS.
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button
- in the popup editor form, paste in this CSS:
div.ccm-page img {
    height: auto;
}

- click the Save button
- click the Save Changes button
- in the popup menu click the Entire Site button
OahuFringeFestival replied on at Permalink Reply
Hi,
Thank you. Before I update / download new version do I need to save current content? Or will update not affect current content on site?

Currently Running 5.7.5.2
Theme: Cloneamental

ps: I donʻt have coding skills - please bare with me as I may need your help some more.

Thanks.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@OahuFringeFestival

I think making regular full backups (files and database) is an important habit to get into in general. It is also a good idea before applying updates.

The update should not change your content though.
OahuFringeFestival replied on at Permalink Reply
Hi;

Thank you - I updated C5 and all is good.

Here is the code that I entered
div.ccm-page img {height:auto;}


As I hovered over this on line 1- this came up:

Expected IDENT at line 1 col 40
Element (div.ccm-page) is overqualified just use .ccm-page without element name

Did I do something wrong here? Or am I good to press save?

Thanks
MrKDilkington replied on at Permalink Reply
MrKDilkington
@OahuFringeFestival

You can ignore that warning and save the style.
OahuFringeFestival replied on at Permalink Reply
Copy that - I just did it but the images on portrait view still look squished. thanks.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
@OahuFringeFestival

The images are still resizing unevenly because you haven't added the correct CSS. You added the CSS inside code tags. Code tags are not valid CSS.

This is what is currently entered:
[code] div.ccm-page img {height:auto;} [//code]

This is what should be entered:
div.ccm-page img {
    height: auto;
}

The code tags are used by the concrete5 forum for formatting code samples. There is an extra forward slash in the description above to allow the code to display.
OahuFringeFestival replied on at Permalink Reply
Hi,
Thank you so much. This did it. My mistake.
I really appreciate the support. Am slowly building site and grateful for your support.
Thanks for the Cloneamental theme! cheers!
Steevb replied on at Permalink Reply
Steevb
Try adding the following code to the main css/less file:
.ccm-page  img{max-width:100%;height:auto;width:auto\9;-ms-interpolation-mode:bicubic}
OahuFringeFestival replied on at Permalink Reply
Hi
Thank you for your help. Still trying to correct this. @MrKDilkington has kindly been working on this and I do hope to solve it. Appreciate the help.