The Easy Way To Edit The Template To Make It More Responsive

RaBiitch Official - Pada Artikel yang anda baca kali ini dengan judul The Easy Way To Edit The Template To Make It More Responsive, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca artikel kami yang berjudul The Easy Way To Edit The Template To Make It More Responsive
The Easy Way To Edit The Template To Make It More Responsive


The Easy Way To Edit The Template To Make It More Responsive: Web-Responsive? did you hear that Word?, certainly not ever if you cultivate a field Web Devloper surely these words are familiar if heard in the ears. well does that already know what that sense of the word-Responsive Web?, for those who do not know here I will try to interpret the words of Responsive.
Responsive Web Design is a technique used to create the layout of the website conform to the display device, either a visitor or size of the orientation. So what is on your computer desktop with the appearance that is accessed through a SmartPhone for example, it would look different. Responsive Web Design to test the display using techniques that are not necessarily Responsive to access it via the mobile device or any other device, but enough with the meminimize browser to the mobile device in the size desired, us can already see our website look on a mobile device's screen.

The Easy Way To Edit The Template To Make It More Responsive
If you want to make your template layout is more responsive to more easily find out how to screen size that is still not responsive you can use online tools that already provides a powerful feature namely Responsinator this site provides powerful tools to check the appearance of your website/blog on the display size.

1. Firstly please visit the Responsinator site first and then check the look of your blog with how to enter the url of your blog. the display will appear the next blog/your website with different display size according to the size on each display either from a desktop display size or the size of the mobile.

Above is a picture as an example where the display before and after the responsive screen size 384px from this blog. You can see the look of before and after pictures blog Responsive above, see it in which both display box homepagenya different.
The look of the blog that blom will probably look more responsive to the desultory if seen in a particular display mode using either the desktop or a particular screen size mobile display with a certain size as well.

Well how do I order for blog/website we can be Responsive in all view? easy you just need to understand how the CSS code responsive below carefully. then try it out.

2. Well now please go to Blogger Edit Html > > Theme.
Structures the CSS code would look like this


*Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
{.astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px)
{ .astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
/* Large screens ———– */
@media only screen
and (min-width : 1824px)
{.astributclass {Max-width:100%;width: auto;}
#astributId {Max-width:100%;width: auto;}
Try your search for CSS code that is exactly the same as the code in the top right box column Edit Html, any blog template css code attached definitely responsive similar as above.
How To Setting The CSS Code Responsive
Well you can make it easier to use IE/Inspect Element to edit the template (Not Permanent Temporary) on IE you can see specific element astribut easily and also can directly edit it, shame on this blog there is no tutorial for How to use the inspect element, but you can look for other possibilities in the stus lot who discuss it.

On the CSS code above that I mark that the explanation is as follows:
. astributclass a small sample mean is in<div class='astributclass'>If the element using the astribut class then in css code please add the point of him. astributclass {Max-width: 100%; width: auto;}
#astributId while the element that uses the astribut Id for example small<div id='astributId'>to apply your css add fence sign (#) in front of #astributId {Max-width: 100%; width: auto;}
On IE/inspect element there you can see directly can also edit templates tampa fear the occurrence of error but only temporary. Above is an easy way to applying CSS settings Responsive.
To find out how the size of the display screen that has not been responsive please look at the bottom of the display Responsinator.
Examples of the application of clearer screen size on css responsive ⇛ If the specified screen size is 340px then writing css will like this @media only screen and (min-width: 340px) if the screen size is 1224px then the css writing responsive like this @media only screen and (min-width: 1224px).
To adjust the size of the astribut element to make it more responsive you just have to resize width/width astribut e.g. astributclass size width: 56% please change be Width: 97% compliance with your own keingginan or straightens my customize with the size of the display screen to make it look more presentable. Don't forget if you want to apply the code above please apply the above code]] ><b:skin></b:skin>or above Well passable hard ya gan? wkwkwk I just giddy to see it hehehehe but if you seriously want to learn for sure you will quickly response.
Later kalo udah dech signal start of normal I would try to create video tutorial I'll makin clear, let me not miss info-info blogging world from this blog site don't forget Subscribe yahh!!!
If anyone is still lacking or wrong in my writing this please maklumi because my own somewhat new/Newbie.</div></div>


Demikian penjelasan mengenai The Easy Way To Edit The Template To Make It More Responsive dan seperti biasa silahkan tinggalkan apa pendapat kalian di kolom komentar mengenai The Easy Way To Edit The Template To Make It More Responsive

Bagikan : https://www.rabiitch.me/2018/08/the-easy-way-to-edit-template-to-make.html

0 Response to "The Easy Way To Edit The Template To Make It More Responsive"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel