Responsive theme and blog images

RapidWeaver Classic General
1

Hi,

I use RW7 + Armadillo
Theme is Reason.

When I add picture my blog post it is ok, but when I look that in mobilephone pictures are cutting??
Template is responsive, but blog pictures are static??

Is there any solution for this problem?

Example post here: http://juuanpienpetoklubi.com/kilpailut/kilpailut2016/?post_id=19&title=pilkkipAivAt-2016-tulokset

2

You have a fixed width and height in the tag img style (width: 645px; height: 363px;).
You can try
style=“float: left; width:100%; and height:auto; margin: 0px 10px 10px 0px;”
instead of
style=“float: left; width: 645px; height: 363px; margin: 0px 10px 10px 0px;” .

You have to open the blog post in armadillo and then look at it using the html view.

3

Hi,
Thanks! that seems to work!

But is that issue in Armadillo? There is no settings where to do that, so I need to do that manually by html code?

4

Do you use the last Armadillo set of stacks ?
When I import an image, Armadillo doesn’t give height and width to the image.
I suppose that’ why it’s automatically responsive for me.

5

@Machist @annebourdon You can add a short CSS snippet to Armadillo’s Custom Styles field, which should make all Armadillo images responsive:

.armadilloContent img { max-width: auto; height: auto; }

This way you don’t need to edit the HTML markup of each individual image.

Armadillo is, by design, very conservative in applying styles, so that the content you create better integrates with your chosen theme.

2 Likes
6

Hi,
I add that CSS snippet in Armadillos settings and now pictures are responsive!! :slight_smile:
Thanks Nimblehost for fast support!

1 Like
7

Happy to help @Machist :slight_smile:

8

Hi Jonathan,

The snippet:
.armadilloContent img { max-width: auto; height: auto; }

Works as expected on RW 6 + Armadillo, but not on RW 7.2 + Armadillo + Strata theme

I would appreciate any help

Best

PS: Never mind, using
.armadilloContent img{
max-width:100%!important;
height: auto!important;
}

works OK.

Best

1 Like
9

Thanks!
Same problem here…

.armadilloContent img { max-width: auto; height: auto; }

That not work anymore…

But that seems to work ok

.armadilloContent img{ 
max-width:100%!important; 
height: auto!important; 
}

Thanks!

10

When I try to save the line of code I get the error “An error occurred when trying to save your settings.” I really need to make this work…

11

Do you try to add this code in “Custom CSS” in Armadillo general settings?
Works fine to me…