Wordpress网站未在Chrome中正确加载css(忽略媒体查询)

时间:2018-01-09 05:13:07

标签: css wordpress google-chrome

我正在使用wordpress中的测试网站,它在firefox和edge中显示得很好,但不是Chrome,特别是标签页头和响应式设计(Chrome根本没有在style.css文件中读取媒体查询由于某些原因)。我已经验证了我可以访问的代码,但我仍然存在差异。

相关网站:

http://alessiosrestaurant.ashleywalters.net/

奇怪的是,我已经完成了一个不使用wordpresses代码的静态页面,它在Chrome上显示正常,使用下面相同的样式。似乎是当我整合这两个问题时。

静态版本:

http://alessiosrestaurant.ashleywalters.net/wp-content/themes/Frank-master/index2.html

相关截图: firefox vs chrome

>>以下对应代码<<

header.php代码:

<?php
/**
 * @package Frank
 */
?>
<!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html class="ie" lang="en-US">
<![endif]-->
<!--[if (gte IE 9) | !(IE)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>
        <?php
        wp_title( '&mdash;', true, 'right' );
        bloginfo( 'name' );
        ?>
    </title>

    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <link href="https://fonts.googleapis.com/css?family=Pragati+Narrow" rel="stylesheet">

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>

</head>
<body id="page" <?php body_class(); ?>>
    <!--[if lt IE 9]>
        <div class="chromeframe">Your browser is out of date. Please <a href="http://browsehappy.com/">upgrade your browser </a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a>.</div>
    <![endif]-->
 <header class="header">
  <h1>Alessio's</h1>
  <nav>
   <ul>
    <li class="first"><a href="#">Home</a></li>
    <li ><a href="#">The Food</a>
     <ul>
       <li><a href="#">Pizza</a></li>
       <li><a href="#">Menu</a></li>
       <li><a href="#">Catering</a></li>
     </ul>
    </li>
    <li><a href="#">The People</a>
     <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact Us</a></li>
     </ul>
    </li>
    <li><a href="#" class="arrow">Order Online</a></li>
   </ul>
  </nav>
  <ul id="social">
   <li><a href="#"><img alt="image" src="wp-content/themes/Frank-master/images/twitter.svg" /></a>
   <li><a href="#"><img alt="image" src="wp-content/themes/Frank-master/images/facebook.svg" /></a>
   <li><a href="#"><img alt="image" src="wp-content/themes/Frank-master/images/instagram.svg" /></a>
  </ul>
 </header> <!-- End Banner -->

style.css(用于主要样式的唯一样式表):

/*
Theme Name:     Frank
Theme URI:      http://somerandomdude.com/work/frank
Description:    The next step of the Franklin Street theme.
Author:         P.J. Onori, heavily altered by Ashley Walters
Author URI:     http://somerandomdude.com/hello/
Version:        0.9.3
License:                GPL 3.0
License URI:        http://www.gnu.org/copyleft/gpl.html
Tags:                   brown, red, white, two-columns, fixed-width, sticky-post, custom-menu
*/


/* ------------------------*/ /* ---------->>> Style Resets <<<-----------*/ /* ------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
* { 
  margin: 0;
  padding: 0;
  border: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    list-style-type: none; 
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
html {overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* ------------------------*/ /* ---------->>> Global Styles <<<-----------*/ /* ------------------------*/


body 
    {
        background: url(images/bg.svg) repeat-x #f8f8f8;
        background-size: 8px 250px;
        color: #222;        
        font: normal 1.25rem/2rem 'Pragati Narrow', sans-serif;
        padding:0; 
        margin: 0;
    }

a {color: #940902;}
a:hover {color: #333; text-decoration: underline;}
img  {border: none;}
h1, h2, h3, h4, h5, h6, blockquote {font-family: Georgia, serif; font-weight: normal; text-align: left;}
h2 {font-size: calc(2vw + 2rem); margin-bottom: 2rem; line-height: calc(2vw + 2rem);}   
a img { border: 0;}
img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}

hr {visibility: hidden; clear: both;}
img.left {margin: .65rem 2rem 0 0; border: 5px solid white; box-shadow: 1px 1px 3px #999; border-radius: 2px;}
.left {float: left;}
p.right {margin-bottom: 1rem; display: block; text-align: right; margin-right: 4rem;}
.bold {font-weight: bold;}
.alignleft {
    float:left;
    margin:5px 20px 20px 0;
}
a img.alignleft {
    float:left;
    margin:5px 20px 20px 0;
}       
/* ------------------------*/ /* ---------->>> Header Styles <<<-----------*/ /* ------------------------*/
header.header {
    width: 100%;
    margin: auto;
    height: 250px;
    background: url(images/logo.svg) no-repeat 6% 48% ;
    background-size: 300px 90px;
    border-top: 0px solid black;
    position: relative;

}
header.header h1 {display: none;}
header.header a {color: white; transition: all 0.2s; text-decoration: none; }
header.header ul {display: block;}
header.header ul li {display: inline-block; }
nav 
{
    box-sizing: content-box;
    position: absolute; 
    top: 170px; 
    right: 0px;  
    background: url(images/tab.svg) no-repeat top left; 
    background-size: 1600px 108px; 
    z-index: 99; 
    letter-spacing: .085em;
    padding-top: .75rem;    
}
nav ul li.first {margin-left: 120px; padding-left: .7rem;   }   
nav a {display: block; color: white;}
nav a:hover {color: #ccc; text-decoration: none;}
nav ul {
  display: block;
  padding-right: 3rem;
  height: 36px;
}
nav ul li 
{
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  transition: all 0.2s;
}
nav ul li ul {
  padding: 0;
  position: absolute;
  top: 67px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
nav ul li ul:first-child {border-top: 10px solid black;}
nav ul li ul li { 
  background: #7d2316; 
  border-bottom: 1px solid #741e12;
  display: block; 
  color: #fff;
 font-weight: normal; 
 font-size: .9em;
  width: 80%; display: block;
  padding: .75rem 1.75rem;
}
nav ul li ul li:hover { background: #000; border-bottom: 1px solid black;}
nav ul li:hover ul {
  display: block;
  opacity: .95;
  visibility: visible;
}
li.order {display: none;}
a.arrow {
    border-radius: 10px;
    background: url(images/double-arrow.svg) no-repeat top right  #92321f; 
    background-size: contain; 
    padding:  0 1.5rem 0 1rem;  
    }
a.arrow:hover {background-color: black;}
#social {position: absolute; top: 55px; right: 5%; z-index: 99; display: block;}
#social li {padding: 0 0 0 0; margin: 1rem .75rem; display: inline-block; width: 58px; transition: all 0.5s ease;}
#social li:hover {transform: rotate(360deg);}

/* ------------------------*/ /* ---------->>> Main Structure<<<-----------*/ /* ------------------------*/
.main-column {  padding: 3em 0 1em 0; width:50%;}
.main-column, .sole-column {

    text-align: justify;
    max-width: 1000px;

}
.main-column, .side-column {display: inline-block;}

.sole-column {
    display: block;
    margin: 0 auto;
    padding: 4em 0 2em 0;
    width:65%;
}
.side-column {
    display: inline-block; 
    vertical-align: top;
    width: 40%; 
    padding-left: 2rem;
}

.side-column img {margin-right: 0%;}
.side-column h3 {font: normal 1.5vw/2rem 'Pragati Narrow', sans-serif; display: inline; }
.two-column {width: 90%; margin: 0 auto; text-align: center;}

/* ------------------------*/ /* ---------->>> Blog Styles <<<-----------*/ /* ------------------------*/
#primary {

    margin-top: 0;
    width:70%;
    max-width: 1100px;
    background-color: #fbfbfb;

    display: inline-block;

    border-right: 4px solid white;
}
.post-title, .post-title-mobile {font-size: 2rem; margin-bottom: 1rem; }
.post-title-mobile {display: none;}
.post-title a, .post-title-mobile a {text-decoration: none; padding-bottom: .35rem; color: #222;}
.post-title a:hover {color: #940902; border-bottom: 2px dotted black; }
.post { border-bottom: 4px solid white; padding: 2rem 4rem 1.5rem 4rem;}
.post p {text-align: justify; overflow: hidden;}
.comments {padding-bottom: 1rem; float: right;}
.pagination  {padding: 2rem 4rem; font-size: 1.5rem; text-align: left;}

.clearfix:after, .post-content:after, .single .post-content p:after, .comment-content:after {
  clear: both;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.wp-post-image
{
    width: 200px;
    display: inline-block;
    clear: left;
    margin: .5rem 0px 0px 0;
    border: 6px solid white;
    box-shadow: 1px 1px 3px #ccc;
}
div.thumbdate 
{
    display: inline-block; 
    width: 100px; 
    padding-right: 2rem; 
    font-size: 1.15rem; 
    box-sizing: content-box; 
    margin-bottom: 0;
    padding-bottom: 0;

}

.date {line-height: 1; width: 6.8rem; margin: .6rem 0 1rem 0;}
.day 
{
    float: left; 
    border-right: 2px solid #000; 
    padding-right: .15em ; 
    margin: 0 .15em 0 0; 
    font: 3em 'Times', serif; 
    color: #940902; 
    line-height: .75;
}
.year {font-size: .95em; }
.month 
{
    font-size: 1.15em; 
    text-transform: uppercase; 
    margin-top: .35em; 

}
.day, .year, .month {display: block; font-weight: bold; }
/* Blog sidebar */
#sidebar 
{
    display: inline-block; 
    vertical-align: top;
    width: 28%; 
    padding: 2rem; 
    margin-top: 1rem;   
    text-align: left;
}
#sidebar h3 {padding-bottom: .75rem; font-size: 2rem;}
#sidebar a {text-decoration: none; color: #840700;}
#sidebar a:hover {color: #000; }
#sidebar ul {line-height: 1;}
#sidebar ul li {padding: 2rem; }
#sidebar h3, #sidebar ul li {border-bottom: 2px dotted #ccc;}
.sidebardate {display: inline-block; float:left; margin-right: 1rem;}
.sidebarmonth {font-size: .95rem; text-transform: uppercase;}
.sidebarday {font-size: 1.55rem; color: #840700; margin-top: -.25rem; font-family: 'Times', serif}
.sidebarmonth, .sidebarday {display:  block; font-weight: bold;}
/*tab styles */
.divider {background: url(images/tab-bg.svg) repeat-x, linear-gradient(90deg, #fbfbfb 50%, #f4f4f4 50%) repeat-y;  background-size: 15px 47px, auto auto;   margin-top: -2em; padding-top: 47px; text-align: center;}
h2.tab 
{
    padding: .8em 4em 0em 1.65em; 
    font-size: 2em; 
    display: inline-block; 
    clear: both;
    color: white;  
    background: url(images/tab-reverse.svg) no-repeat top right; 
    background-size: 1600px 108px; 
    margin: 0; 

    z-index: 99;
}
h2.tab:before {
    content: '';
    display: block;
  }
/* ------------------------*/ /* ---------->>> Homepage Styles <<<-----------*/ /* ------------------------*/
#menu 
{
    width: 100%; 
    max-width: 600px;
    margin-top: 6rem;   
    border: 4px solid white;    
    box-shadow: 1px 1px 3px #ccc;
    background: url(images/food-display.jpg) no-repeat; 
    background-size: cover; 

}
#menu:hover {opacity: .9; transition: opacity .3s;}
#menu img {width: 100%; height: auto; }
#menu h2 {display: none;}

.deals {margin: 3rem 0 2rem 0;}
.deals h3 
{
    font-family: 'Pragati Narrow', sans-serif; 
    font-weight: bold; 
}
.deals ul 
{
    background: url(images/connector.svg) no-repeat 1.5rem 30px; 
    background-size: 1px 200px; 
    list-style-type: none;
}
.deals ul li 
{
    padding: 0rem 0 1.6rem 4rem;
}
.deals ul li.silverware 
{
    background: url(images/icon-silverware.svg) no-repeat; 
}
.deals ul li.kids 
{
    background: url(images/icon-kids.svg) no-repeat; 
}
.deals ul li.punch 
{
    background: url(images/icon-double-punch.svg) no-repeat; 
}
.deals ul li.kids, .deals ul li.silverware, .deals ul li.punch 
{
    background-size: 50px 50px;
    background-position: 0 7px;
}
#browse {width: 100%; background: url(images/tab-bg.svg) repeat-x #f4f4f4; background-position: 0 0px; background-size: 15px 47px; padding-top: 57px;   margin-top: -4rem;}
h2.browse 
{
    display: inline-block; 
    padding: 1em 6em 1em 4em; 
    font-size: 1.25em; 
    color: white;  
    background: url(images/icon-menu.svg) no-repeat 1em .85em, url(images/tab-reverse.svg) no-repeat top right; 
    background-size: 47px 41px, 1600px 108px; 
    margin: 2rem 0 0 0;
}
#browse ul
{
    z-index: 99; 
    margin-top: -.5em;
}
#browse ul li 
{
    display: inline-block; 
    width: 16.6667%; 
    outline: 3px solid white;
}
#browse ul li a 
{
    display: block; 
    text-align: center;
    background: url(images/block-transparent.png) repeat-x;
    background-size: 10px 47px;
    background-position: bottom left;
    color: white; 
    position: relative;
    width: 100%;
    height: 175px;
    border-bottom: 10px solid black;
}
#browse ul li a em
{       
    padding: 0rem .2rem .1rem.2rem; 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.15rem;
}
#browse ul li a:hover 
{color: #ccc; 
border-bottom: 10px solid #940902; 
    background: url(images/block.png) repeat-x;
    background-size: 10px 47px;
    background-position: bottom left;
    transition: border-bottom 0.5s ease, background 0.5s ease;
}
.pasta {background: url(images/browse-pasta.jpg);}
.pizzas {background: url(images/browse-pizza.jpg);}
.soups {background: url(images/browse-soups.jpg);}
.appetizers {background: url(images/browse-appetizers.jpg);}
.entrees {background: url(images/browse-entrees.jpg);}
.subs {background: url(images/browse-subs.jpg);}
.pasta, .pizzas, .soups, .appetizers, .entrees, .subs 
{
    background-repeat: no-repeat; 
    background-color: black; 
    background-size: cover; 
    height: 175px; 
    padding: 0em; 
}



/*Makes the thumb on the homepage scale with the paragraph*/
p.scaling-thumb {
    background: url(images/pizza-thumb-border.png), url(images/pizza-thumb.jpg); 
    overflow: hidden; 
    background-size: 9rem auto; 
    padding-left: 11rem; 
    background-position: bottom left, 0 7px;
    background-repeat: no-repeat;
}
.nowrap {white-space: nowrap;}

/* Force Metaslider Plugin to adhere to new styles */
.metaslider {overflow:hidden;}
.metaslider .caption-wrap {opacity: .9 !important;}
.caption {font-size: 2rem; 
        font-family: Georgia, serif; 
        color: white; 
        line-height: 2rem; 
        padding: 1.5rem 0 !important;
        text-align: center;}

#slider 
{
    background-image: url(http://alessiosrestaurant.ashleywalters.net/wp-content/uploads/2017/10/slider2-2000x561.jpg); 
    height: 435px; 
    position: relative;
    background-repeat: no-repeat; 
    background-size: cover; 
    border-bottom: 40px solid black; 
    text-align: center; 
    margin-top: 3px;
}

#slider p 
{
        font-size: 2vw; 
        font-family: Georgia, serif; 
        color: white; 
        line-height: 1em; 
        background-color: black; 
        border-bottom: 0px solid white;
        opacity: .9;
        padding: .5em; 
        margin: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
}
#slider img {max-width: 20%; height: auto; margin-top: .5em;}
/* ------------------------*/ /* ---------->>> Footer Styles <<<-----------*/ /* ------------------------*/
footer.footer 
{
    border-top: 0px solid black;

    width: 100%;

    background: url(images/tab-bg.svg) repeat-x, url(images/brick.jpg) repeat top left; 
    background-position: 0 0px, top left; 
    background-size: 15px 47px, 1587px 397px; padding-top: 57px;
    background-color: #63140a;   
    color: white;
    padding: 0rem 0 0 0;

}
/*footer.footer h2:before {content: '\e0c8'; font-family: "Material Icons";  font-size: 2.75rem; vertical-align: inherit;}*/
footer.footer h2 {margin-bottom: 0; vertical-align: middle;
background: url(images/tab-bg.svg) repeat-x black; background-position: 0 0px; 
background-size: 15px 47px; padding: 1.5rem 2rem .75rem 2rem; font-size: 2rem; border-bottom: 3px solid #eee; }
footer.footer h3 {font-size: 2rem; font-family: 'Pragati Narrow', sans-serif; margin-bottom: .5rem; letter-spacing: .1rem;}
footer.footer ul+p {
    text-align: center; 
    background-color: black; 
    outline: 2px solid #eee;
    padding: 1.5rem 1rem; 
    margin-top: -10px; 
    width: 100%;
    font-size: 1.15rem;
    color: #eee;
    letter-spacing: .05rem;
}
.locations {text-align: left; margin: 0 auto; width: 75%; }
footer.footer ul {text-align: center;  margin: 0rem auto 0 auto; padding-top: 0rem; width: 80%;}
footer.footer ul li {display: inline-block; margin: 2rem auto; width: 33%; padding: 1rem 0; 
vertical-align: top; line-height: 1.35; text-align: center; }
footer.footer ul li:nth-child(n+2) {border-left: 0px dotted #eee;}
p.location {background: url(images/icon-location.svg);  letter-spacing: .05rem;}
p.hours {background: url(images/icon-hours.svg);}
p.phone {background: url(images/icon-phone.svg); padding-bottom: 5px;   letter-spacing: .05rem;}
p.location, p.hours, p.phone {background-repeat: no-repeat; background-size: 26px; padding-left: 40px; background-position: 0 4px; margin-bottom: 1rem;}


/* ------------------------*/ /* ---------->>> Responsive Design <<<-----------*/ /* ------------------------*/
/*For large tablets*/
@media screen and (max-width: 1100px)  {
.post { padding: 2rem 2rem 1rem 2rem; width: 100%; }
.post h3 {font-size: 3vw;}
#primary {margin: 0 auto 0rem auto; width: 100%;  display: block; border: none; border-bottom: 4px solid white;}
#sidebar {width: 100%; display: block;  margin: 0 0 3rem 0; padding: 0;}
#sidebar ul {padding: 0 4rem;}
#sidebar ul li  {border: none;}
#sidebar ul li:nth-child(n+2) {border-top: 2px dotted #ccc;}
#sidebar h3:first-of-type {display: block; background: url(images/tab-bg.svg) repeat-x black; 
background-size: 15px 47px; padding: 2rem 2rem 1rem 2rem; 
font-size: 2rem; outline: 4px solid white; color: white; border: none; margin-bottom: 1rem;}
.pagination {padding: 1rem 2rem; }
.main-column {margin: 0 auto; padding: 2rem; width: 40%;}
.two-column {width: 100%;}
.side-column {width: 40%;}
.sole-column {width: 100%; margin: 2.5rem auto; padding: 1rem 3rem 0 3rem;}
.deals {width: 50%; margin: 2rem auto;}
.deals ul {background: none;}
header.header { background-position: 6% 40% ; padding-top: 48px;  height: 300px;}
nav {position: relative; display: block;  background-color: black; border-bottom: 4px solid white; padding: 1rem 1rem 2rem 1rem; }
nav ul {display: block; padding-right: 0;  width: 90%; margin-left: auto; margin-right: auto; text-align: center;}
nav ul li.first {margin-left: 0px; padding-left: 0em;   }   
nav ul li {text-align: left;}
#slider {height: 300px;}
#slider p {font-size: 2.25vw; padding: .75em; margin-bottom: -1.5em;}
#slider img {margin-top: .5em; max-width: 15%; height: auto;}
#social {position: absolute; top: 95px; right: 5%; }
#social li {margin: 0em 0 0em 1em; width: 50px; }
.divider {background: url(images/tab-bg.svg) repeat-x #f4f4f4;}
h2.browse-menu {background-position: 1rem 1rem, top right; }
#menu { padding: 0em; margin: 10em auto 0 auto; }
h2.tab 
{
    padding-left: 1.5em; 
    font-size: 3.5vw; 
}
footer.footer ul {width: 100%;}
footer.footer ul li {width: 32%;}
}

/*For all other tablets*/
@media screen and (max-width: 768px) {


.deals {width: 70%; }
.comments {display: none;}
.locations { padding: 0rem 5rem; width: 100%;}
h2.tab {display: block; background: url(images/tab-bg.svg) repeat-x black; background-position: 0 0px; background-size: 15px 47px; padding: 2rem 2rem 1rem 2rem; font-size: 2.25rem;}
.divider {background: none;}        
header.header {background: url(images/logo.svg) no-repeat center 40%; background-size: 250px 75px; border-top: 1px solid black; }
nav {font-size: .85em;}
nav ul {display: block; padding-right: 0;  padding-left: 0; width: 100%; margin-left: auto; margin-right: auto; text-align: center;}    
nav ul li.first {display: none; }   
nav ul li {  text-align: left;  margin-right: 0;  padding: 1em 1.5vw; }
nav ul li ul {top: 67px; width: 125px;} 
#social {width: 90%; text-align: center; margin: 90px auto 0 auto;}
#social li {outline: 0px solid purple; margin: 0; width: 50px;}
#social li:nth-child(2) {margin: 0em 1.25rem; }
a.arrow {display: none;}
.main-column {width: 100%;}
.sole-column {padding: 0rem 1.5rem 0 1.5rem;}
.side-column {width: 100%; padding: 1rem;}
.deals {width: 100%; margin: 0 auto;}
#menu {margin: -2rem 0 2rem 0;}
p.scaling-thumb {background: none;  padding: 0 .5rem;}
#primary {background-color: #f4f4f4;}
#sidebar ul {padding: 0 1rem;}
.post-title-mobile {display: block; border-bottom: 2px dotted #666; padding-bottom: .75rem;}
.post-title-mobile a:hover {color: #940902; }
.post-title {display: none;}
.post p {overflow: initial;}
#browse {background: none; margin: 0; padding: 0;}
h2.browse {background: url(images/icon-menu.svg) no-repeat 1rem center, url(images/tab-bg.svg) repeat-x black; 
background-size: 47px 41px, 15px 47px; 
display: block; 
margin: 0; 
padding: 2rem 2rem 2rem 5rem;}
#browse ul li {width: 33.33%; padding: 0; margin-top: -.5rem; }
#browse ul {margin: 0;}
#browse ul li a em {font-size: calc(2vw + .5rem);}
.locations {padding: 2rem 1rem 2rem 2rem; width: 300px;}
footer.footer ul {margin: 0; padding: 0; }
footer.footer ul li {max-width: 100%; width: 100%;  border-right: 5vw solid black; border-left: 5vw solid black; background: url(images/left-arrow-bg.png) no-repeat center left; 
margin: 0; }
footer.footer ul li:nth-child(n+2) {border-top: 2px dotted #eee;  border-right: 5vw solid black; border-left: 5vw solid black;}
footer.footer ul li p {font-size: 1.25rem;}
footer.footer h2 {display: block;}

}

的index.php:

<?php
/**
 * @package Frank
 */
?>
<?php get_header(); ?>
<?php 
    echo do_shortcode("[metaslider id=12]"); 
?>
<div id="content" class="home">
   <div class="sole-column">
   <h2><span class="nowrap">Good People.</span> <span class="nowrap">Good Food.</span></h2>       
    <p class="scaling-thumb">
     Family-owned and operated, Alessio's Restaurant & Pizzeria has been part of the Metro Atlanta community for over 20 years. 
     We pride ourselves on serving you the finest pizza, calzones, pasta, and sandwiches this side of the Big Apple. 
     Our authentic New York style pizza and Italian classics are made from scratch with fresh ingredients and hand-tossed dough. 
     We served all our food with a smile so come on over and see us soon.     
    </p>
   </div>
     <h2 class="browse">Browse Our Menu</h2>
   <div id="browse" >
   <ul><!-- The li tags below must have no space between them or gaps will appear   <img alt="image" src="wp-content/themes/Frank-master/images/pizza-footer.jpg" class="left" />-->
    <li class="pizzas"><a href="#" ><em>Pizza</em></a>
    </li><li class="pasta"><a href="#" ><em>Pasta</em></a>
    </li><li class="entrees"><a href="#" ><em>Entrees</em></a>
    </li><li class="subs"><a href="#" ><em>Subs & Paninis</em></a>
    </li><li class="soups"><a href="#" ><em>Soups & Salads</em></a>
    </li><li class="appetizers"><a href="#" ><em>Appetizers</em></a>
    </li>
   </ul>
   </div>
    <div class="two-column">
    <div class="main-column deals">
   <h2>Hot Deals</h2>
   <ul>
   <li class="silverware">
    <h3>Monday</h3>
    $3.00 off a 16" cheese pizza & $5.00 off a pitcher of domestic beer
   </li>
   <li class="kids">
    <h3>Tuesday</h3>
    Kids eat free (with one adult purchase of $10 or more)
   </li>
   <li class="punch">
   <h3>Wednesday</h3>
   Double punch day
   </li>
   </ul>

    </div>
  <div class="side-column">
   <div id="menu">
    <h2>Download our Menu</h2>
    <a href="#"><img src="wp-content/themes/Frank-master/images/download-menu.svg" alt="Icon of a spoon and a folding menu" /></a>
   </div>
  </div>
  </div>
<hr>
  <h2 class="tab"> Latest Alessio's News</h2>
  <div class="divider">    
 <div id="primary">    
   <?php if ( have_posts() ) : ?>
   <?php while ( have_posts() ) : ?>
   <?php the_post(); ?>    
    <article class="post clearfix clear" id="p<?php the_ID(); ?>">      
    <div class="alignleft thumbdate">
      <div class="date">
       <em class="day"><?php the_time('d'); ?></em><div class="month-year"><em class="month"><?php the_time('M'); ?></em><em class="year"><?php the_time('Y'); ?></em></div>
      </div>
      <?php the_post_thumbnail(); ?>     </div> 
    <h2 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
      <section class="post-content clearfix">
       <?php the_excerpt(); ?>
      </section>
      <p class="comments"><a href="<?php comments_link(); ?>">Comment<img alt="image" src="wp-content/themes/Frank-master/images/icon-comments.svg" height="22" width="32" /></a></p>
    </article>
    <?php endwhile; endif; ?>
    <?php comments_template(); ?>
    <p class="pagination">
    <?php global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $wp_query->max_num_pages
) );
?>
            </p>    
</div>
<aside id="sidebar">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=10' ); ?>
 <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
 <li><div class="sidebardate"><span class="sidebarday"><?php the_time('d'); ?></span><span class="sidebarmonth"><?php the_time('M'); ?></span></div>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php 
endwhile;
wp_reset_postdata();
?>
</ul>
</aside>

    </div></div>    
<?php get_footer(); ?>

0 个答案:

没有答案