I have two pages with similar designs. A column on one of the pages (Design MCW104) aligns perfectly, but doesn’t align well on the other page (Design MCW204). I have included a screenshot of the column from the page (Design MCW204) where the column is not aligning correctly. (The column is in the Introduction section) Any idea why this is happening?
Hello @eutaw,
Thanks for writing in!
You are experiencing the issue because your image width is only 375 pixels and the column is 380 pixels. You are 5 pixels short which is why it looks like the there is an empty space. To resolve this, you will need to upload your image of at least 500 pixels wide or more.
Best Regards.
Is there a way to change the width of the column to 375 pixels, so that nothing in the column extends beyond the image?
Hi @eutaw,
That is not responsive and will just do more issues than good. If you don’t want to reupload a larger image, please add this to the Image Element’s Element CSS area
$el.x-image img {
width:100%;
}
Please do note that this will stretch your image, so if you apply this to a small image and gets stretch it will look blurry. But I think this will not be an issue with your images since its not too small and it has an overlay color.
Cheers!
How would I determine that the size of the image should be 500 pixels opposed to another size? Is there an article that you can point me to where this is explained?
Hello @eutaw,
You can edit your photos using Photoshop or any other image editing software. If you have a larger version of the image, this will be good. If your original image is smaller then editing it might not help because as soon as you enlarge the image the quality will degrade and not a sharp image.
We do not have any article image about the image and how its dimension should be. It just that a smaller image will not fit in the column width is wider than the image width. This is what we only have with the image element:
Hope this helps.
Thank you. One more question…Where in Cornerstone does it show that the width of the column is 380, as indicated in your first response?
Hey @eutaw,
In Cornerstone you cannot find the width of the column but you can use Chrome’s developers tools to find the width and height of any element for example, if you inspect your Image element in Chrome by right clicking on the image and click Inspect menu:
Now if you hover over the <img /> tag or any other element inside the developer tools you should see the dimensions of the element:
To learn more about Chrome’s developers tools please follow:
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.