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 download file button in react js

By
To create a download file button in React.js, follow these steps: Import the necessary dependencies: javascript Copy code import React from 'react' ; import { saveAs } from 'file-saver' ; Create a function that handles the download action: javascript Copy code const handleDownload = ( ) => { // Create a new Blob object with the desired content const fileContent = 'This is the content of the file you want to download.' ; const blob = new Blob ([fileContent], { type : 'text/plain;charset=utf-8' }); // Use the saveAs function from the file-saver library to initiate the download saveAs (blob, 'download.txt' ); }; Create a button component and attach the handleDownload function to the button's onClick event: javascript Copy code const DownloadButton = ( ) => { return ( < button onClick = {handleDownload} > Download File </ button > ); }; Use the DownloadButton component wherever ...
Post a Comment
Read more

How to Convert Unreal Engine 5.1 Blueprint Project to C++ Project

By
To begin, open your project in the Unreal Engine 5 or a newer version of the editor.  Next, access the New C++ Class Dialog by selecting Tools and then New C++ Class .  From there, create a new "None" class and press "Create Class."  You might receive a warning message regarding the game module compilation, but you can disregard it and choose "No."  After closing any pop-ups, warnings, or success notifications, exit the Editor.  Proceed to your project's folder, right-click on the .uproject file, and select "Generate Visual Studio project files."  Double-click your project's .sln file to open it in Visual Studio.  In Visual Studio's Solution Explorer, find and choose your project.  Select "Development Editor" in the build configuration drop-down menu.  Right-click on your project and select "Build" to compile it without any errors.  Afterward, set the build configuration drop-down menu to "Development" ...
2 comments
Read more