I’m trying to align images to the bottom baseline of a div within a color section. I have two 50% columns in the color section (left is text, right is image). As the site is responsive, when I change the window size the image moves up/down the container as it seems to be fixed a to a certain point on the page, and not anchored to the bottom.
Is there a way to fix the baseline of the image to the baseline of the container indefinitely with this theme/css? Essentially, the image is aligned to the bottom to begin with at full width, but as the window contacts, the text forces to container to expand and I end up with white space below the image.
My CSS for the image div is as follows:
CSS for parent container (color section):
HTML for image in container:
Is there anything in the CSS for Enfold that might conflict with this code and cause the image not to align to the bottom of a div? Any ideas would be massively appreciated – thanks!
Still looking for a solution to this, I can’t understand why images are behaving this way. Any ideas?
Can we see what you have no live? The css isn’t getting at the root of the issue which is as the theme responds to the users device it automatically gets padding added in. In most layouts this makes it look better but when you are trying to add the image directly to the edge it doesn’t quite work out.
What you can do is target the ID of your color section (give it an ID in the color sections options). Then use that ID to target the container inside the color section and remove the padding. If we can see the site/section live we can assist with the css.
The topic ‘CSS Issues with Color Sections’ is closed to new replies.