Skip to main content

How to make a Responsive Blog Theme

Image
By
With the increasing number of mobile devices like smartphones, tablets, netbooks it is necessary to have Responsive Design for your Blog if you don't want your visitor zooming in and zooming out of the webpages to read.
A Responsive Design results in a Webpage or Website which is easier to navigate through and easy to read.



Why Responsive Design?

Consider a webpage made for viewing on computer. It uses a Cascading Style Sheet(CSS) for defining its design. When we open same web page on Mobile or tablet, it will still use the same CSS. But since the screen size is significantly small it will give an unpleasant experience to the viewer. 
To tackle this situation we follow the Responsive Design approach.

How does Responsive Design work?
It uses the CSS property called @media which lets you check the screen resolution(screen width) of the viewer.
By checking the resolution of the viewer it will be apparent whether the viewer is using a computer system or a mobile phone and there we will make it so that the CSS property accessed are dependent on the resolution of the viewer.

Practical.
@media all and (min-width: 1020px){
.container
{
width: 1020px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */

@media all and (min-width: 800px) and (max-width: 1020px){
.container
{
width: 800px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */

@media all and (min-width: 100px) and (max-width: 640px){
.container
{
width: 100%;
margin: auto;
}
.primary{
width: 100%;
float: left;
}
.secondary{
float: left;
width:100%;
}
}/* media all and (min-width: 100px) and (max-width: 640px) */



This covers 3 types of views which are ones with width 100 to 640px which will cover almost all phones and some tablets, and others are ones with 800px to 1020px wide display and 1020px and beyond.

Labels:

Comments

Post a Comment

Popular posts from this blog

Unity Mobile Game Optimization Checklist

By
- On Image and Text components that aren’t interacted with you can uncheck “Raycast Target” on it, as it will remove them from any Raycast calculus. - Click on your textures in your “Project” window. Click on the “Advanced” arrow, and now check “Generate Mip Maps”, Unity especially recommends it for faster texture loading time and a lower rendering time. - Set the “Shadow Cascades” to “No Cascades” (Quality settings) - If you have dynamic UI elements like a Scroll Rect with a lot of elements to visualize, a good practice is to turn off the pixel perfect check box on the canvas that contains the list and disable the items that aren’t visible on the screen. - Set all non moving objects to "Static" - Above Unity3d 2017.2 you should turn off "autoSyncTransforms" on the Physics tab - Always use Crunch Compression Low on textures - Try to keep the “Collision Detection Mode” on “Discrete” if possible, as “Dynamic” demands more performance. - You can go to the TimeManager w...
Post a Comment
Read more

How to make RPC in Unreal Engine Steam Online Subsystem and EOS

By
Remote Procedure Calls, also known as RPCs, are a way to call something on any other instance.  In the Unreal Engine, RPCs are used to ship events from the patron to the server, the server to the customer, or from the server to a specific group. It's important to word that RPCs cannot have a return cost. If you want to return something, you'll ought to use a seconds RPC within the contrary path. There are precise policies that RPCs observe, which are unique in the official Documentation. Some of these regulations encompass wherein the RPC must be run, such as the server instance of an Actor, on the owner of the Actor, or on all instances of the Actor. There are some necessities for RPCs. First, they must be referred to as on Actors or replicated Subobjects. The Actor (and component) have to additionally be replicated. If the server is looking an RPC to be executed on a customer, handiest the patron who owns that Actor will execute the function. Similarly, if a client is calling...
Post a Comment
Read more

How to fix clothes flickering in Unreal Engine 5.

By
 This issue can be noticed some of the character clothes when using Paragon Characters in UE5. To fix the flickering issue, Use Self Collisions checkbox in collisions properties under the Static Mesh option of your character. Open the character model go to   Asset Details > Clothing Properties - Cloth Config - ChaosClothConfig - Collision Properties - Use Self Collisions > False
Post a Comment
Read more