@hirashabeer
Posted
hi @0xabdulkhalid ,,,could you please spare a moment to REVIEW MY WEBSITE ,and suggest me some improvents..and also help me in finding the mistake that when i previiew my site its perfect but on screenshot why does it layout gets distorted
@0xabdulkhaliq
Posted
Salam Alaikum @hirashabeer, The layout seems to be distorted because of the usage of height: 95vh for #container element. You don't need to add width: 100% because div is a block level element so it will consume 100% of available space.
Additionally you need to convert those percentage (%) for padding into relative units like rem or em using percentage will highly distort your layout.
If you need to design the solution with maximum resemblance of original design then you can try the Pixel Perfect extension. It would help you to place the design images provided by FEM to place that on top your website where you can compare yours with design image.
You can see the results of using Pixel Perfect for my submission as an example of how it helps us to design much better looking websites.
If you have any questions or need further clarification feel free to reach out to me.
Marked as helpful
@hirashabeer
Posted
Walaikum Assalam @0xabdulkhalid ! the pixel perfect isn't working for me as the design images are smaller than the web window. how can I use and compare it then? Is it possible I'm overlooking something obvious? Is there a key detail I'm not considering?OR it is just as it is ?
@0xabdulkhaliq
Posted
Oops @hirashabeer, I forget to mention a thing about using it.
You first need to find the resolution of the Design image provided by FEM. For example: if it would be 1400x900 then you need to open dev mode on browser then toggle RWD (Responsive Design Mode).
It will give you some base presets of resolution of devices, You can set the custom width and height on RWD Panel. If you set 1400x900 then it matches the resolution of Design image.
Once you done it, you can use Pixel Perfect extension to place the Design image on top of you webpage. Now the Design Image and the Viewport both will be the same and allows you to can design your solution efficiently.
@hirashabeer
Posted
salam @0xabdulkhalid , So sorry to bother you again, but....Resizing browser window shrinks design image too ,I am trying to help myself by internet but couldn't do so I wish I could send you a picture ,,,, how to fix it ?
@0xabdulkhaliq
Posted
Wa alaikum salaam @hirashabeer, I think you could use "Pixel Perfect Pro" for Firefox.
You don't need to shrink the viewport, just make it as same as the Design image's resolution.
Take a look at this example video. (Added as a comment for your commit)
The design image's resolution is 1440x800 so set the viewport as same as that. That's it, once you placed the image you can start working!
Marked as helpful
@hirashabeer
Posted
yes @0xabdulkhalid ,, I didn't shrink the window i resized it to 1440x900 as the design image ,,and the design image also got shrinked i use chrome ,,and i am use to of it,,
