I am using the native CardSectioned widget to display lists of companies and information regarding each company. These cards are part of an adaptive gallery and it looks great when the browser is full screen, but when the browser is made narrower the image and the title text spill out from above/to the right of the card (image attached).
Image:
I've put each image inside a relative-position container with absolute positioning using the following CSS. This ensures that each image in the gallery is in line with one another:
.library-img-absolute {
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Text:
There is no CSS formatting on the text other than using heading5.
I am wondering if I need to recreate the CardSectioned widget so that I can modify the CSS applied to individual elements or if I am missing something here.
Hi Peter,
Better if you put here the URL and we can inspect and maybe solve your issue.
Thanks, PT
To resolve this problem use media queries or make sure the image is responsive with "max-height:100%" and "max-width:100%". Or, Pls share the URL to find the main issue.
@Peter Ohashi To give you an exact solution , you can provide a url of this for reference, else create the same scenario in your personal environment and attach that url or oml, it will be helpful to resolve your issue