Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.
All I see is you could use word wrap and max width but what are you using this on? Can you post a screenshot? Also, where is CSS for dominant? If you set something to 100% there is no other part so it is interpreted to be on same part maybe. X E.
 
@Jo
All I see is you could use word wrap and max width but what are you using this on? Can you post a screenshot? Also, where is CSS for dominant? If you set something to 100% there is no other part so it is interpreted to be on same part maybe. X E.

Thank you so much for your response!

Here is a screenshot of what I want to achieve:

shot.png

The first grid item is an image, and the second is text. I called the second one 'dominant' because I want it to dictate the height of the grid item, and I want the image to be an square image.

So as the text gets longer, I want the image to also get bigger.

I updated the codepen with an example of a real image. This time the second item does not overlap the first one, but the image does not adapt to the height of the 'dominant' element.

How can I do that??
 

New Threads

Buy us a coffee!

Back
Top Bottom