Connect with us

Blog

Responsive Design with CSS3 Media Queries

mm

Published

on

css tips

Responsive design and CSS media queries changed the user view of your website based on device size.

Please have a look of below html link tags that are used for media query for different styles of screens:

<link href=”print_style.css” type=”text/css” media=”print” rel=”stylesheet”/>

<link href=”screen_style.css” type=”text/css” media=”screen” rel=”stylesheet”/>

Standard Media Queries for Standard Devices:

According to devices we have set of common styles for all screen sizes. Following are the screen resolution of the media queries for standard screen sizes:

@media only screen and (max-width : 320px) {
 
}
 
/* Mobiles in landscape mode */
@media only screen and (min-width : 321px) and (max-width : 480px) {
 
}
 
/* Tablets */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
 
}
 
/* Desktops and laptops*/
@media only screen and (min-width : 1224px) {
 
}
 
/* very large screen devices */
@media only screen and (min-width : 1824px) {
 
}

/* For print */
 
@media print {
/* Add your style here */
}

Some of mobile browsers display zooming on screen touch because that contains larger viewport than the actual device. This issue can be solve with the help of the following Meta tag:

<meta name=”viewport” content=”width=device-width;>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0″/>

HTML Code Structure

Also Read :   Hire Dedicated WordPress Developers

I have a page that container wraps the “header”, “content”, “sidebar”, and “footer” together.

<div id="pawrapper">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo tset</h1>
			<h2 id="site-description">Demo webSite Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			Demo blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

Flexible Images CSS

img {

max-width: 100%;

height: auto;

width: auto;

}

Flexible Embedded Videos CSS

 .video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

If you have any question related to WordPress hosting and security, you can contact us or ask your question with us. For more tutorials, you can visit our other articles or visit questions page.

You can join us on twitter or subscribe at YouTube for more web design & development tutorials.

Hi, Thank you for reading my article. I am Victor, a professional blogger from Jaipur, India.I started webetutorial for blogging & sharing solution for developer questions, and now it’s empowering globally by helping them to make money.I am writing about starting & managing a blogs, WordPress, Magento, Social Media, SEO, Marketing, making money online, Investment, Finance, Gadgets, Fitness and more.

Continue Reading
Advertisement
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

one + twenty =

Blog

Ways to Increase Comments on Your Blog

mm

Published

on

Ways to Increase Comments on Your Blog

Everyone knows commenting on the other website blogs give the benefits of backlinks, traffic, and branding of our linked website and we are trying lots of things to create a good backlinks which would give a huge converting traffic to us. Sometime people commenting a those website which doesn’t have good reputation or not a much traffic so, their efforts are not useful for them.

Commenting is the ways to drive traffic that is facebook commenting, twitter commenting or website commenting. Here we are going to tell you about some points which may give you huge traffic to increase comments on your blog.

Blog Comment Points Are:

Get visitors to subscribe: Many readers don’t want to comment at first time on your blog because they don’t have much truest on your blog and they don’t know about how much the traffic on your blog getting. To ask them to subscribe to your blog for more blog or webinar this will help to increase comments, traffic and revenue.

Also Read :   Hire Dedicated WordPress Developers

Disable spam prevention methods: If you are using captcha, then you need to remove them so user can comment without any interruption.

Avoid forcing registration: If you are using registration process for commenting on your site ten remove them because this create far too much resistance and makes it much more irritate for your visitors to comment.

Link to your comments section at the end of your post: Lot of blog themes have a problem with its comment section, visitors have to scroll the whole page at the bottom for the commenting. Your blog should have comment link at the top of page with blog title where visitor can click and move directly to comment section.

Go back and think about the audience you’re trying to reach: If you are getting many comments then try to give answer of your visitors which give your attention to your visitor and help you to reach your goal and focus on the right areas.

Also Read :   Manas National Park - Wildlife Tourism

Leave an unanswered question at the end of your post: Ask a question at the end of blog which is the one of the best ways to get readers attention to comment on your blog. Your aim should to develop a discussion within your comments and the more discussion.

Respond to comments and encourage more conversations: As we talk in Go back and think about the audience you’re trying to reach engaging your audience for getting more comments in general ways to respond to comments for further conversation.

You can let us your point of views in the comment or subscribe us to get more blog from us.

Continue Reading

Trending