Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 26, 2025 at 2:37 pm #1480204
    AnnemarieDoolin

    Hej Wonderful Team,

    I am pulling my hair out trying to create something “that looks simple” but clearly I’m not that smart :-(

    I want to create this agenda (3 columns but one column involves an image) – SEE SCREENSHOT

    WEBSITE LINK

    – I’ve tried dragging in a table but there is no way of controlling the column widths so the whole thing stretches across the page.
    – I’ve tried old school html table text;
    – I’ve tried setting a text box with 3 columns and cutting and pasting the three fields in manually… but it looks a mess on the mobile.

    Any heads up on where you would focus? I’ve been avoid digging into this but now a client is insisting they want it.

    Kind regards,
    Annemarie

    March 28, 2025 at 1:00 pm #1480359
    Mike

    Hey Annemarie,
    Thanks for the link to your site, but I didn’t find an example, thanks for the mockup screenshot as that helps.
    As I understand using the table works except you want it “full width”, can you create a test page with the table and add the custom class “fullwidth” to the table element so we can examine and offer some css to make it full width.
    Please note that if the table element is in a column element or color section element it’s width will be limited by these elements, so please review.

    Best regards,
    Mike

    April 12, 2025 at 3:50 pm #1481232
    Guenni007

    see here a working example: https://webers-testseite.de/mie2/
    these are three color-section ( with small padding )
    if you do not like to have it full-width just remove that rule:

    #top .avia-section.grid-layout .container {
  max-width: 100%;
  /*! padding: 0; */
}

    for me the responsive alternative is nicer. you see how it works – the width of the columns is globaly set to : unset – so 1/3 is not working here – the grid-template-columns determines the width now.
    On that alternative responsive behaviour – we got two columns then – first with 1part (fraction) the second column with 2parts.
    As on former table layout we can make a “colspan” if we fill those grid-cells this way:

    grid-template-areas: 
      "feld2 feld1" 
      "feld3 feld3";

    it is like this on former table layout:

    <table>
	<tbody>
		<tr>
			<td>feld2</td>
			<td>feld1</td>
		</tr>
		<tr>
			<td colspan="2">feld3</td>
		</tr>
	</tbody>
</table>

    but now you can have a very flexible layout with responsive options
    PS: The advantage of a layout like this is that it can be styled with media queries. Try it with tables (this is a remnant from the old days)

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.