column width within row

  • cecilesarlet

    (@cecilesarlet)


    4 months, 1 week ago

    I created rows with different column widths, so that the pictures I put into them are in a certain ratio.

    However, once published, the right column is much larger (taking the whole width). Setting the page width to e.g. 70% doesn’t help – it just makes the right column as big as possible. How can I fix the ratio between the colums? Or should I use another form of row? table? raster?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    4 months, 1 week ago

    You have varying style width attributes in some of your img tags which is causing uneven layout. Not the attributes like width="1024", but the style attributes like style="width:453px;height:auto"

    With the flexbox model, if you need to adjust item sizing, don’t use width values. Instead use flex-shrink or flex-grow.

    Avoid using HTML tables to achieve layout. They don’t behave responsively and will force small screen users to need to side scroll and pinch zoom to read content. In some cases where cell alignment is essential, tables may be a good solution; but for general layout that concept went away at the turn of the century 😉 The modern equivalent of tables is the CSS grid model.

    A giant raster image has responsiveness issues similar to tables. I generally advise avoiding text as images all together because of responsiveness issues. You can get elliptical borders with CSS border radius properties. The x-axis and Y-axis dimensions can be specified separately. I’m not suggesting you redo what you have. Just FYI, maybe for next time.

    Flexbox ought to work for you once it’s properly implemented without conflicting directives.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.