Jump to content
Yatendra

Aside & Mobile Friendly Layout!

Recommended Posts

I designed many Web Page Layouts, but in all Web Pages there are some issues.

One is the "Aside", Web Pages are misbehaving with Aside, when I check the Web Pages with Mobile Browser, they mess up totally!!

Need help here.

Second, My Web Pages are not totally Mobile friendly, such as the "Header" and "Footer" also misbehaves.

When the Web Pages are open with Mobile Browser, the Header and Footer both don't come up with full width, but the web pages are PC friendly!!

 

I attached the code files, have a look.

Basically I need to know "How to Aside" properly, and as well as I want a review for my code.

 

Layout _4 and Layout_4-Copy.html are same, but with one difference :- I removed "Aside" from Layout_4-Copy.html.

Plz refer Layout_4-Copy.html for Second Problem, specifically.

 

Thank you.

layout_3-3.html

layout_4.html

layout_4 - Copy.html

Share this post


Link to post
Share on other sites

Your layout technique is really bad. This doesn't have to do with aside, this is just what happens when you try to position things with pixel values and negative margins.

 

To allow blocks to be next to each other, use the CSS float property.

 

Do not set the width of elements in pixels, don't use tables for your navigation menu. Be aware that borders add on to the width of the element, so that will affect our layout as well.

  • Like 1

Share this post


Link to post
Share on other sites

Hey, Thanks for the review.

Now I know what I have to fix.

I'm a bit confused about different units for various purposes. I mean the specific use of units for positioning or making blocks to be aside.

Plz help me out with this.

And on w3schools they recommend "em" unit instead of "px", I'm very confused with the use of "em" unit.

Can you plz explain the "em" use, and as well as the exact conversion(HOW TO) of it, according to the font-size taken for different blocks or text.

 

And what will be the perfect unit for setting "width"???

And did you referred my second problem with your Last statement..!??? (About the "Header & Footer").

Thank you.

Edited by Yatendra

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...