Goal is simple:
I want all images in the pdf to be the same big size (420px I believe).
=== The Setup and Trouble: ===
With one image in step, it looks like this. ALl good. This is what I want. img class=large
[image|131031]
When I override standard and medium images (in steps that contain 2 and 3 images, the images are in bullet list with standard and medium classes)
[code]
.stepImages.standard img{
width: 420px;
}
.stepImages.medium img{
width: 420px;
}
[/code]
I do get all images nice and big, but the text is up below instead of on the side.
[image|131032]
So I launch into making the text shift to the right, but the default method seems to be hardcoded (from what I see in the CSS) to shift one picture height up.
[code]
.stepText.rightText {
width: 300px;
margin-top: -315px;
min-height: 315px;
margin-left: 440px;
margin-right: -56px;
}
[/code]
This means that I would have to shift the text different amount depending whether there are two images or three images in the step.
... and that seems impossible with pure CSS unless I'm missing something.
I even asked a question on StackOverflow on this: http://stackoverflow.com/questions/43416322/css-select-sibling-of-an-element-with-a-specific-sub-element
[image|131033]
SO
How do I do this?
Thanks!
Goal is simple:
I want all images in the pdf to be the same big size (420px I believe).
=== The Setup and Trouble: ===
With one image in step, it looks like this. ALl good. This is what I want. img class=large
[image|131031]
When I override standard and medium images (in steps that contain 2 and 3 images, the images are in bullet list with standard and medium classes)
[code]
.stepImages.standard img{
width: 420px;
}
.stepImages.medium img{
width: 420px;
}
[/code]
I do get all images nice and big, but the text is up below instead of on the side.
[image|131032]
So I launch into making the text shift to the right, but the default method seems to be hardcoded (from what I see in the CSS) to shift one picture height up.
[code]
.stepText.rightText {
width: 300px;
margin-top: -315px;
min-height: 315px;
margin-left: 440px;
margin-right: -56px;
}
[/code]
This means that I would have to shift the text different amount depending whether there are two images or three images in the step.
... and that seems impossible with pure CSS unless I'm missing something.
I even asked a question on StackOverflow on this: http://stackoverflow.com/questions/43416322/css-select-sibling-of-an-element-with-a-specific-sub-element
[image|131033]
SO
How do I do this?
Thanks!
Goal is simple:
I want all images in the pdf to be the same big size (420px I believe).
=== The Setup and Trouble: ===
With one image in step, it looks like this. ALl good. This is what I want. img class=large
[image|131031]
When I override standard and medium images (in steps that contain 2 and 3 images, the images are in bullet list with standard and medium classes)
[code]
.stepImages.standard img{
width: 420px;
}
.stepImages.medium img{
width: 420px;
}
[/code]
I do get all images nice and big, but the text is up below instead of on the side.
[image|131032]
So I launch into making the text shift to the right, but the default method seems to be hardcoded (from what I see in the CSS) to shift one picture height up.
[code]
.stepText.rightText {
width: 300px;
margin-top: -315px;
min-height: 315px;
margin-left: 440px;
margin-right: -56px;
}
[/code]
This means that I would have to shift the text different amount depending whether there are two images or three images in the step.
... and that seems impossible with pure CSS unless I'm missing something.
I even asked a question on StackOverflow on this: http://stackoverflow.com/questions/43416322/css-select-sibling-of-an-element-with-a-specific-sub-element
[image|131033]
SO
How do I do this?
Thanks!
Goal is simple:
I want all images in the pdf to be the same big size (420px I believe).
=== The Setup and Trouble: ===
With one image in step, it looks like this. ALl good. This is what I want. img class=large
[image|131031]
When I override standard and medium images (in steps that contain 2 and 3 images, the images are in bullet list with standard and medium classes)
[code]
.stepImages.standard img{
width: 420px;
}
.stepImages.medium img{
width: 420px;
}
[/code]
I do get all images nice and big, but the text is up below instead of on the side.
[image|131032]
So I launch into making the text shift to the right, but the default method seems to be hardcoded (from what I see in the CSS) to shift one picture height up.
[code]
.stepText.rightText {
width: 300px;
margin-top: -315px;
min-height: 315px;
margin-left: 440px;
margin-right: -56px;
}
[/code]
This means that I would have to shift the text different amount depending whether there are two images or three images in the step.
... and that seems impossible with pure CSS unless I'm missing something.
I even asked a question on StackOverflow on this: http://stackoverflow.com/questions/43416322/css-select-sibling-of-an-element-with-a-specific-sub-element
[image|131033]
SO
How do I do this?
Thanks!