Style & Presentation — Blogger AMP Theme Design for Large Screen Size

We will continue from where we have left of  in previous Blogger & AMP template integration tutorial Style & Presentation - Mobile 1st Design Approach for Blogger templates with Accelerated Mobile Pages fundamentals.

Here is what you will achieve with this exercise:-

If you have not setup a clean Blogger template with AMP components, we have the full tutorial guide here http://blogr-amp.blogspot.com/2016/11/getting-started-create-your-1st-amp.html .

If you require to add more Blogger section layout with AMP HTML fundamentals, you can find the full tutorial here http://blogr-amp.blogspot.com/2016/11/add-layout-blogger-sections-widgets.html .

If you have not yet setup your Blogger template mobile views here is the full tutorial & guide http://blogr-amp.blogspot.com/2016/11/style-presentation-mobile-1st-blogger.html

We will start our guide where we have left off from the previous tutorial.

Adding Media Queries

After finishing up styling your Blogger template mobile views in previous tutorial, here we will be using media queries to start adding more CSS to handle your page elements display on larger screen sizes.

Here is the easiest explanation about media queries & how it is used on web pages [source]

Add below CSS media queries inside your  <style amp-custom='amp-custom'> tag before the ending /*]]>*/</style> tag.

@media (min-width:768px){

}

We have set a CSS directive to handle specific styles (which we will be adding later) for your page elements for screen larger than 768px (targeting iPads, tablets etc).

Set Page Layout Width

Since that we already assigned a wrapper container surrounding our Blogger sections, now we can easily set our template width according to the break point for a certain target screen sizes. Add below CSS to set 2 break points screen sizes - for tablet & for screens larger than tablet screen.

@media (min-width:768px){
  /* layout width TABLET */
  .container {
    width: 768px;
  }
}

@media (min-width:1160px){
  /* layout width PC */
  .container {
    width: 960px;
  }
}

Save your template

Here we are setting, when the screen width is higher than 1160px (laptops, desktop), set the page width to 960px. When the screen width reaches between 1160px & 768px (tablet), then reduce the page (.container) width to 768px.

On mobile the width will spread across with a padding of 20px left & right that we have set the .container CSS earlier. You can set any amount you prefer for your page .container width but do take note on screen resolutions/sizes which is most widely used by readers.

min-width:768px is most commonly used as break points since that tablets or ipads uses this screen size.

Header Presentation on Larger Screen

Inside <header> tag consists of our header logo section with the class name .header & navigation section with class name .navbar .

We will reference this to style just like in previous tutorial. Add below CSS inside the assigned media queries.

/* header logo PC */
.header {
  display:inline-block;
  float:left;
  text-align:left;
}

/* navigation PC */
.navbar {
  display:inline-block;
  float: right;
}

.navbar ul{
  text-align: right;
}

Save your template. Noticed that we still add indicators/comments so you can easily refer to for changes.

Here we are assigning the header logo to "float"/position to the left of the page & the navigation to "float"/position to the right of page but within its parent .container we have assigned in previous tutorial.

This answers the question why we are wrapping our Blogger elements with a container wrapper explained in previous tutorial.

We also added some text alignment to override the default text alignment that was assigned earlier in the tutorial on mobile views / smaller screen sizes.

You can change the header arrangements by switching the float from right to left & left to right at the assign elements. Adjust the element width according to your preference.

Content Presentation on Larger Screen

We will target our <article> & <aside> page element & we want to arrange the elements side by side with its own assigned width. Add below CSS inside your assigned media queries.

/* contents PC */
article {
  width:66.66666%;
  display:inline-block;
  float:left;
}

 .main {
  padding-right: 40px;
}

aside {
  width:33.333333%;
  display:inline-block;
  float:right;
}

Save your template.

Here we are aligning our <article> & <aside> elements but would be constraint within its own .container parent element. The <article> has a width of 66.666666% & the <aside> at 33.333333% which is equal to 100% of its parent .container width.

You can change the percentage amount according to your preference. On a common web page layout, the sidebar (aside) would be at least 1/3 of the main content of a page or its minimum width could handle ads at 280px in width, according to industry standards.

You can also re-arrange the <article> to place on the right of screen by changing the float style. Replace the float to use float:right; at article & a float: left; at aside, you will instantly have a left .sidebar with right article layout.

Footer Presentation on Larger Screen

We have already assigned 4 Blogger sections to insert widgets in template, now we are going to assign these sections to align in a four column display. Add below CSS inside the assigned media queries.

/* footer PC */
.footer {
  width:25%;
  display:inline-block;
  float:left;
  text-align: left;
}

.footer ul {
  text-align: left;
}

Save your template.

Here we are aligning our .footer Blogger sections in a 4 column layout with a 25% width from the parent .container width (25% x 4 columns = 100% ). We also added some text alignments to override mobile views text alignments which we have set earlier.

There you go! Now you have a fully responsive blog template layout, using Accelerated Mobile Pages HTML with styles included to custom set according to your needs.

You can check how your new template display by narrowing down your browser tab to as lows as 768px & view the page elements sort itself according to your mobile view that was set.

If somehow your page texts has some overflow when narrowing down your browser to the assigned width, you can add below CSS to control your text display inside its .container.

header,
article,
aside,
footer {
  word-wrap: break-word;
}

You can also add some Blogger widgets styling that might be used or installed from your dashboard for example Blog Archive widget, Popular Posts widget, Label widget etc like so:-

/* Blog widgets specific */
.PopularPosts ul {
  list-style: none;
  padding-left: 0;
}

.Label ul {
  list-style: none;
  padding-left: 0;
}

.BlogArchive {
  list-style: none;
  padding-left: 0;
}

/* blog pagination */
.blog-pager {
  text-align:center;
}

.blog-pager a {
  display:block;
  padding: 6px 12px;
}

The full codes to be added to handle your blog/web template display on larger screen sizes would be something like below:-

/* CSS styles from earlier tutorials above */
/* START STYLES ON LARGER SCREENS */
@media (min-width:768px){
  /* layout width TABLET */
  .container {
    width: 768px;
  } 
}

@media (min-width:1160px){
  /* layout width PC */
  .container {
    width: 960px;
  } 
}

@media (min-width:768px){
  /* header logo PC */
  .header {
    display:inline-block;
    float:left;
    text-align:left;
    width: 33.333333%;
  }

  /* navigation PC */
  .navbar {
    display:inline-block;
    float: left;
    width: 66.66666%;
  }
  
  .navbar ul{
    text-align: right;
  }
  
  /* contents PC */
  article {
    width:66.66666%;
    display:inline-block;
    float:left;
  }

  .main {
    padding-right: 40px;
  }
  aside {
    width:33.333333%;
    display:inline-block;
    float:right;
  }

  /* footer PC */
  .footer {
    width:25%; /* divide footer section to 4 equal column size */
    display:inline-block;
    float:left;
    text-align: left;
  }

  .footer ul {
    text-align: left;
  }
}

header,
article,
aside,
footer {
  word-wrap: break-word;
}

/* Blog widgets specific */
.PopularPosts ul {
  list-style: none;
  padding-left: 0;
}

.Label ul {
  list-style: none;
  padding-left: 0;
}

.BlogArchive {
  list-style: none;
  padding-left: 0;
}

/* blog pagination */
.blog-pager {
  text-align:center;
}

.blog-pager a {
  display:block;
  padding: 6px 12px;
}

Now you have a full presentable web/blog page display, with your own fonts to use, your custom layout, fully responsive & looks awesome at any screen size with an insane page display speed powered by Blogger & Accelerated Mobile Pages AMP HTML.

In total, less than 250 line of codes used to manage your web/blog page layout. The CSS styles that you have included is structured, well indicated, rich with references to ease you design editing or updates.

Your web browser is your best friend. Use your web browser to inspect (right click select Inspect Page) your web pages as it is displayed. You can find errors, warnings & even target on elements you require to change or update its styles.