Easy simple fluid layout question

[Yorh_Ekin]

I have created a rather simple layout using breakpoint and fluid layout with responsive width elements.

Somehow I am not able to figure out how to position the elements correctly.

The layout concept works for the mobile version but not for the desktop version.

Here is the link:

[ankushr40215001]

Hello Yorh,

It looks like you have used an external theme or template for your site.

You will have to check with the theme vendor regarding this query.

Regards,

Ankush

[Yorh_Ekin]

No, I have created the template with Muse by myself. There is no template vendor involved.

Thus, the question is in concern of the sixth row on the right.

The point is.

I can make this layout using a table based layout in minutes. How can I make the sixth row on the right using a fluid layout grid in Muse?

It's like

<table width="100%" height="100%">

<tr rowspan="4">

<td></td>

</tr>

...

<tr>

<td width="50%" height="40px"> ... </td>

<td width="50%" height="40px"> ... </td>

</tr>

</table>

[Ussnorway]

so you want a pad of 40 in the desktop view?

[Yorh_Ekin]

This is how it looks in Muse. I was trying to figure out how to adjust the rectangles to achieve a 50/50% column view for the last row. But it looks faulty in the browser.

The layout concept only works for the smaller view/breakpoint.

[Pavel_Homeriki]

I do not quite understand that you can not get.

Do you want that would be so?

[Yorh_Ekin]

That's it pretty much. I need the brown and the grey & mint green rectangle to be pinned at the bottom of the page.

Your animation looks seductive, BUT it does not show the variation of the height.

The outer breakpoint layout only works if the brown and the grey & mint green rectangle are not pinned at the bottom of the page.

NOT PINNED = OK

PINNED = FALSE

[Pavel_Homeriki · Accepted solution]

I'm afraid to disappoint you, but use of bottom pinning  will work well only on the desktops. For mobile devices in general, pinning can not be used, and especially bottom. This is due to the peculiarities of mobile browsers.

[Yorh_Ekin]

Yes, I have noticed that by using the Alternative Layout option. on iPhone the layout works so far.

[Yorh_Ekin]

Thanks for your effort. Anyway I am still looking for the option to vertically center images and text and a resize width & full height. I need resize to full browser height. This is what I really demand as a designer before really going into deep into creating responsive websites.