Responsive Design - Adjust Image Box

Support has been upgraded!

The Support Forum is closed. Not to worry! Providing the top quality support you expect and we're known for will continue! We're not ending support, just changing where you submit requests. This will provide you with the best experience possible.

Premium Support

Have you purchased an addon for Connections such as one of our premium templates or extensions with a valid license and you need help?

Please open a Support Ticket in your user account.

Click here to open a support ticket.

Free Support

Are you using the free Connections plugin? Don't worry, you are still very important to us! We are still providing you with the same high quality support that we're known for.

Please open a new support topic in the WordPress support forums for Connections.

Click here to open a support topic.

This topic is: resolved

Tagged: 0.7.8.1, css, image, Responsive

This topic has 2 replies, 2 voices, and was last updated 9 years, 9 months ago by Steven Zahm.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
06/19/2013 at 1:29 am #263142

Michael
Guest

Hello,

I am trying to create a website with a responsive design and was wondering if the div holding the image in the “Profile Entry Card 1.0” template could be resized to account for changes in window size. I assume this will involve some CSS and I tried .cn-image-style { max-width: 100%; height: auto; } but was unsuccessful. Any suggestions?

08/13/2013 at 8:16 am #267066

Jack
Guest

I would also be interested in finding the workaround for this. I’m aware the premium themes have a CSS but it would be nice to try it on the default templates before I buy.

I tried editing the same line you did & the line underneath.

<img width="100%" class="photo"...

but to no avail.

Thanks.

08/13/2013 at 11:42 am #267093
Steven Zahm
Keymaster
@ Jack

This should work with any template, add the following to the end of the theme’s style.css file:
```
#cn-list span.cn-image {
   width: auto !important;
   height: auto !important;
}

#cn-list span.cn-image img.photo {
   width: 100% !important;
   height: auto !important;
}
```
I don’t really consider this truly responsive, but it satisfied a couple other users.
Author

Posts