[magichmmm]

What is the optimum size for images to go in the library so that the Bref template will resize automatically for responsive use.

I am finding that images on my phone are being cut off at the sides.

Many thanks – I really want this to work for my site.

[Juanfra Aldasoro]

Hello there,

Thanks for writing.

On what section are you finding that the images are being cut off at the sides?

Best,
Juan.

[magichmmm]

If you look at the free talk section of my site at simonwilliams.me.uk on a phone etc the image is cropped.

I have emailed my details so you can cheque this Juanfra.

Simon

[magichmmm]

Sorry;, should say check not cheque!

[Juanfra Aldasoro]

Hi Simon,

Thanks for writing. No problem, I got it 🙂

I went through your site and it seems that you want to apply “responsiveness” to the images you add through the content editor.

I think one solution for this would be using some CSS like this:

@media screen and (max-width: 1024px) {
.entry img{ width: 100%; }
}

You need to insert the code in your custom.css or put it in your Custom CSS option.

Best,
Juan.

[magichmmm]

Hi Juan,

Never having added code before I was rather nervous!

I have added the code to the custom.css script. The whole width does now show but unfortunately the picture is squashed giving it a deformed look. Is it possible to have the picture reformat in proportion?

many thanks,

Simon

[magichmmm]

Hi Juan,

Further to the above. I noticed that the image on ‘about me’ page seems to resize perfectly on my phone (Samsung note 2) but the ‘free talk’ page image does not!

Simon

[magichmmm]

More fiddling . . . .

I now realise that the image on ‘about me’ page is narrower. So by reducing the width on ‘free talk’ page it more or less fits my phone.

However, I realise this is not truly responsive.

Love the theme though and want to get it to work!

Simon

[Juanfra Aldasoro]

Hi Simon,

I went through your site and couldn’t see the code I’ve sent you. If you insert the image from the content editor, with a specified width (as it is now), then that width will be taken into account when displaying the image.

Best,
Juan.

[magichmmm]

Hi Juan,

Sorry, I have now re-added the code to the custom.css file.

Now, the images are squashed on the about me page on my phone whereas they were displaying fine before. When I turn to landscape on phone they squash flat – they seem to being forced to full width rather than resizing proportionately.

Simon

[Juanfra Aldasoro]

Hi Simon,

Ok, then maybe you should try to use a CSS class for the images you want to be responsive.

For example:

@media screen and (max-width: 1024px) {
.responsiveimage{ width: 100%; height: auto; }
}

And then when inserting a photo from the content editor, add the class “responsiveimage” to that image.

Best,
Juan.

[magichmmm]

Thanks for your help on this Juan.

I’m afraid I am not sure where to put this code! sorry, I know I’m a noob.

Simon

[Juanfra Aldasoro]

Hi Simon,

The code goes either in the Custom CSS option or in the custom.css file.

With regards to using the class afterwards, when inserting an image from the mediauploader, once in the editor, click on “Edit Image”, then you go to “Advanced Settings” and then you set the “CSS Class” responsiveimage.

Best,
Juan.

[magichmmm]

Thanks Juan – now seems to work on phone, but still slight issue with browsers.

I have just emailed you.

Simon

[Juanfra Aldasoro]

Hi Simon,

Thanks for writing.

I went through your site and you’re not using what I suggested. Do you understand the whole “responsiveimage” thing?

Best,
Juan.