The header dimensions in Desktop devices are often too big roughly around 1366px to fit in Mobile devices which are 768px-320px in size. Therefore we will learn today how to center align these widgets and compress their container sizes to ensure they fit perfectly in different small screen devices. Lets get to work!
A default header is always static i.e. does not adopt to device screen size, not stretchable. The header below is static and it contains several sections of gadgets that we need to make mobile responsive.
Before: www.mybloggertricks.com?m=0
Header consists of:
Now after applying the CSS3 media queries we will be able to completely change the look of the Header widgets for mobile devices. As shown below, we have made simple changes to make sure every widget adopts automatically to a change in screen size.
After: www.mybloggertricks.com?m=1
Header reorganized in this format:
Liked it? Lets learn how to accomplish it!
I have written a detailed tutorial that you can read to learn how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method. We will uses these Classes or IDs to control their appearances in mobile devices.
You can also find what are the classes of your header widgets by visiting the Layout page. The bolded text that you see are your Parent classes. In my case these are headerleft and headerright as shown below
Note: that classes start with a (.) symbol while IDs start with (#) symbol.
So in our case the parent classes or IDs are as follow:
Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) . Always start with larger screen sizes and then move to smaller break points.
Note: Refer to Part#2 of this tutorial series to understand what I mean by choosing breakpoints or ZONES
We will choose the 786px breakpoint which is ZONE4 . You will add the following CSS code inside this zone as shown below:
/*-----iPads, Tablets ZONE4 ----------*/
@media only screen and (max-width:768px) {
#header {overflow:hidden!important;width:100%!important;}
.headerleft{top:5px;margin-bottom:10px!important; width:100%;}
.headerright{float:none;margin:0 auto!important;width:100%;}.headerright a img,.headerleft a img{
max-width: 75%!important;height:auto;
margin-left: 0;
position: absolute;
left: 30px;}}
Important points to note:
Now instead of using Display:none to hide the stickybar and the menus from static header we wil instead use the conditional tag for mobile devices which is isMobileRequest and this method is SEO friendly and really speeds up the webpage.
All you need to do is to enclose the sticky bar container and menu containers inside the conditional tag as follows
<b:if cond='data:blog.isMobileRequest == "false"'>
<div id="bloggernotificationWrap">
-----------------
--------------</div>
</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>
<nav id="Main-Menu">
-----------------
--------------</div>
</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div id="secondary-Menu">
-----------------
--------------</div>
</b:if>
Save your template and you will find your header all responsive in a blink of an eye! :)
The tutorial above may sound a little techy for those who are not well versed with basics of HTML and CSS. But no worries your brother is here and the Forum community is here to help you 24/7 =)
Feel free to ask us as many questions as possible and we would love to help. Peace and blessings buddies and Happy Independence day to both Pakistan and India. May we all prosper and live happy forever. God bless you all! ^_^
The video below explains it all:
uKit became available to the public in May 2015, offering a free 14 days initial trial, which gives you the opportunity to fully enjoy the system's capabilities before applying for a premium package. If you have any questions or need fast assistance you can directly contact their Technical Support. They also provide Live Customer Support inside the Admin Panel of your Website, and its only thing that outstands them from others. It's surely not a Fly-by-night company but managed and marketed by a corporate firm with an amazing customer service.
They also have a Official Blog where they keep the community informed of recent updates and backstage news.
No business should be trusted unless it has an active customer support or offers a free trial. You can test uKit for free for almost half a month before you could decide to finally upgrade with just $4. This again is a prove of their credibility and the reason which forced us to recommend them to all our readers.
Appearance matters a lot and we have honestly rarely seen such a comprehensive collection of website designs that we found here.
Partial List of Categories are:
When you are choosing a design in the Dashboard Wizard, you can click on the Preview button to browse all pages of the design, see how it looks on desktops and mobile devices, and decide whether it suits your needs or not.
If you would like to test a certain design more thoroughly, you can also select it and proceed to website editing.
The number of websites per account is unlimited, and you can experiment with designs as much as you need.
For non-techy people, what can be more pleasing than the drag-n-drop feature which lets you to add highly advanced web widgets like Gallery or slider using only your mouse cursor. I really liked this feature because modern portfolio websites or ecommerce sites look great when the landing page has a welcome slider.
The built-in Business tools like content let you add amazing functions in your website. You can sell products on your website using the ECWID Shopping cart option
you can also collect customer feedback using the Reviews plugin tool and do much more!
Unlike Wordpress and Blogger CMS, uKit provides a much better Support for Automatic and Manual Backup. You can manually save your changes before making a new customization. You can then access it anytime through the backup archive. The Automatic Backup function is direct access to the saved copies. It allows you to replicate your site in its previous or earlier states in case you decide that the current one is for some reason not the ultimate one.
We will keep on sharing such valuable resources to help our community as much as possible with the most trusted, industry-standard tools and applications that may make your online journey even more worthwhile.
Let us know buddies, which feature of uKit inspired you and what are your views on using an automated CMS system like the one we shared today. Is it worth wasting hours on web development or is it much better to invest that extra time in developing your business and Client base and let a tool like Ukit handle all the technical side?
Do share your precious views with us :)
