Title: Moved box after css optimization
Last modified: June 25, 2017

---

# Moved box after css optimization

 *  [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/)
 * Hi, When I check the CSS optimization box all works well except a box that I 
   have in this page
 * [http://escolabressolargenins.com/contacte/](http://escolabressolargenins.com/contacte/)
 * with the data of the business, the backgroud is moved, and in the gallery pages,
   the same problem with the menu box
 * look at:
 * [http://escolabressolargenins.com/pt-photos/primer-pis/](http://escolabressolargenins.com/pt-photos/primer-pis/)
 * or
 * [http://escolabressolargenins.com/pt-photos/segon-pis/](http://escolabressolargenins.com/pt-photos/segon-pis/)
 * For example….

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9259413)
 * ok, can you disable “inline & defer” and “optimize HTML” for a second?
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9259871)
 * if you add this code as custom CSS (appearance -> customize -> custom css) it’ll
   probably be fixed;
 * `#sidebar {box-sizing:content-box}`
 * (you might have to add the important flag though; `#sidebar {box-sizing:content-
   box !important;}`)
 * frank
 *  Thread Starter [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9269289)
 * Yes! It solves the problem, for other users that found this thread, I need to
   say that after the change I need to clear the cache of other plugin in my case
   WP Super cache.
 * Now I have another problem, my google map not show at (the problem is only in
   firefox and Edge…)
 * [http://escolabressolargenins.com/contacte/](http://escolabressolargenins.com/contacte/)
 * And I have Optimize JavaScript Code, disabled (I don’t know but I’m obtaining
   less note at google pagespeed with Optimize Javascript enabled).
 * When I disable and clear cache of autoptimize, I can see the google map, when
   I enable css optimization, I can’t see it….
 * I have the option Inline and defer whit this code:
 * @charset “utf-8”;
 * html,
    body, div, span, iframe, h1, p, a, img, ul, li, nav { margin: 0px; padding:
   0px; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit;
   font-variant: inherit; font-weight: inherit; line-height: inherit; vertical-align:
   baseline; }
 * nav {
    display: block; }
 * a {
    text-decoration: none; -webkit-transform: translateZ(0px); outline: rgb(
   0, 0, 0); }
 * ul {
    list-style: none; -webkit-transform: translateZ(0px); }
 * a,
    span, h1, li { -webkit-transform: translateZ(0px); }
 * *,
    ::before, ::after { box-sizing: content-box; }
 * .shortcodes *,
    .shortcodes ::before, .shortcodes ::after { box-sizing: border-
   box; }
 * body {
    background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/
   style/img/pattern.png); background-position: 0% 0%; background-repeat: repeat
   repeat; }
 * #container {
    width: 100%; max-width: 1024px; margin: 50px auto 60px; clear: 
   both; background-color: rgb(255, 255, 255); -webkit-box-shadow: rgba(0, 0, 0,
   0.2) 0px 0px 10px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px; border-
   top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius:
   10px; border-bottom-left-radius: 10px; overflow: hidden; }
 * .wrapper {
    width: 100%; max-width: 890px; margin: 0px auto; clear: both; }
 * .zindex {
    position: relative; z-index: 100; }
 * .left {
    float: left; }
 * .right {
    float: right; }
 * h1 {
    color: rgb(93, 93, 93); font-size: 46px; font-family: ‘Medula One’, Helvetica,
   Arial; line-height: 47px; }
 * .header {
    width: 100%; background-image: url(//escolabressolargenins.com/wp-
   content/themes/dreamy/style/../style/img/bg-header.jpg); background-position:
   0% 0%; background-repeat: repeat repeat; }
 * .head-parallax {
    position: relative; width: 1024px; height: 200px; }
 * .bg-header-shadow {
    width: 100%; padding: 55px 0px 65px; }
 * .logo {
    margin-top: 5px; }
 * .logo img,
    .logo a { float: left; }
 * .bg-menu {
    width: auto; }
 * .bg-menu-left {
    width: 30px; height: 88px; background-image: url(//escolabressolargenins.
   com/wp-content/themes/dreamy/style/../style/img/bg-menu-left.png); background-
   position: 0% 0%; background-repeat: no-repeat no-repeat; }
 * .bg-menu-right {
    width: 27px; height: 88px; background-image: url(//escolabressolargenins.
   com/wp-content/themes/dreamy/style/../style/img/bg-menu-right.png); background-
   position: 0% 0%; background-repeat: no-repeat no-repeat; }
 * .bg-menu nav {
    float: left; width: auto; height: 88px; background-image: url(//
   escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-menu-
   center.png); background-position: 0% 0%; background-repeat: repeat no-repeat;}
 * .bg-menu nav ul {
    float: left; width: 100%; margin: 29px 20px 0px; }
 * .bg-menu nav ul li {
    float: left; width: auto; margin-right: 15px; }
 * .bg-menu nav ul li a:link,
    .bg-menu nav ul li a:visited { display: block; color:
   rgb(255, 255, 255); font-size: 10px; font-family: Helvetica; padding: 0px; float:
   left; }
 * .bg-menu nav ul li a:link,
    .bg-menu nav ul li a:visited { display: block; color:
   rgb(255, 255, 255); font-size: 26px; font-family: ‘Medula One’; padding: 0px;
   float: left; }
 * nav ul li .bullet {
    float: left; margin: 7px 9px 0px 0px; width: 12px; height:
   13px; background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/
   style/img/menu-star.png); background-position: initial initial; background-repeat:
   no-repeat no-repeat; }
 * nav ul li ul .bullet {
    width: 0px !important; height: 0px !important; float:
   none !important; background-image: none !important; background-position: initial
   initial !important; background-repeat: initial initial !important; }
 * nav ul li ul a {
    float: none !important; }
 * .blue-page {
    width: 100%; margin: -10px 0px 0px; }
 * .bg-blue-top {
    width: 100%; height: 18px; background-image: url(//escolabressolargenins.
   com/wp-content/themes/dreamy/style/../style/img/bg-blue-top.png); margin: 31px
   0px 0px; position: absolute; bottom: 0px; z-index: 10; background-position: 0%
   0%; background-repeat: repeat no-repeat; }
 * .bg-blue-down {
    width: 100%; height: 18px; background-image: url(//escolabressolargenins.
   com/wp-content/themes/dreamy/style/../style/img/bg-blue-down.png); position: 
   relative; z-index: 9; background-position: 0% 0%; background-repeat: repeat no-
   repeat; }
 * .bg-blue-center-title {
    width: 100%; padding: 45px 0px 30px; background-image:
   url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-
   blue-center.png); background-position: 0% 0%; background-repeat: repeat repeat;}
 * .content {
    width: 100%; background-image: url(//escolabressolargenins.com/wp-
   content/themes/dreamy/style/../style/img/bg-content.jpg); margin-top: -10px; 
   padding: 60px 0px 30px; background-position: 0% 0%; background-repeat: repeat
   repeat; }
 * .content-left {
    width: 100%; }
 * .blog-one-single {
    width: 100%; }
 * .parallax-viewport {
    position: absolute; overflow: hidden; width: 1024px; height:
   200px; margin: 0px !important; }
 * .parallax-layer {
    position: absolute; }
 * .tooltip {
    opacity: 0; display: none; margin: -60px 0px 0px -1.6%; position:
   absolute; }
 * .tooltip p {
    color: rgb(255, 255, 255); font-size: 12px; font-family: ‘Helvetica
   Neue’, Helvetica, Arial, sans-serif; padding: 4px 19px 0px; height: 19px; border-
   top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius:
   4px; border-bottom-left-radius: 4px; background-color: rgb(255, 117, 74); }
 * .back1 {
    position: absolute; bottom: -15px; left: 39%; width: 0px; height: 0px;
   border-color: rgb(255, 117, 74) transparent transparent; border-width: 10px; 
   border-style: solid; }
 * .facebook-tool {
    margin-left: -30px; }
 * .google-tool {
    margin-left: -35px; width: 104px; }
 * .shortcodes {
    width: 100%; }
 * .shortcodes {
    float: left; width: 100%; color: rgb(93, 93, 93); font-size: 15px;
   font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; line-height: 21px;
   padding: 0px 0px 30px; }
 * .shortcodes h1 {
    float: left; width: 100%; margin-bottom: 15px; color: rgb(93,
   93, 93); font-size: 46px; font-family: ‘Medula One’, cursive; line-height: 48px;}
 * .shortcodes img {
    max-width: 100%; height: auto; }
 * .title-pages {
    width: 100%; color: rgb(255, 255, 255); font-size: 66px; font-
   family: ‘Medula One’, cursive; line-height: 38px; text-align: center; }
 * .full-pages {
    width: 100%; margin-bottom: 50px; }
 * .contact-text {
    width: 100%; }
 * .aligncenter {
    display: block; margin: 5px auto; }
 * .aligncenter {
    display: block; margin: 5px auto; }
 * [@media](https://wordpress.org/support/users/media/) screen and (max-width: 1100px)
   and (min-width: 911px) {
    #container { width: 870px; }
 *  .wrapper {
    width: 810px; }
 *  .content {
    padding: 40px 0px 30px; }
 *  .bg-menu nav ul li a:link,
    .bg-menu nav ul li a:visited { font-size: 24px; }
 *  nav ul li .bullet {
    margin: 7px 4px 0px 0px; }
 *  .head-parallax {
    width: 870px; }
 *  .parallax-viewport {
    width: 870px; }
 *  .parallax-layer {
    display: none; } }
 * [@media](https://wordpress.org/support/users/media/) screen and (max-width: 910px)
   and (min-width: 601px) {
    #container { width: 600px; }
 *  .wrapper {
    width: 520px; }
 *  .bg-menu nav ul {
    display: none; }
 *  .head-parallax {
    width: 600px; }
 *  .parallax-viewport {
    width: 600px; }
 *  .parallax-layer {
    display: none; } }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   600px) and (min-width: 460px) {
    #container { width: 360px; }
 *  .wrapper {
    width: 270px; }
 *  .logo {
    width: 100%; text-align: center; }
 *  .logo img,
    .logo a { float: none; width: auto; }
 *  .bg-menu nav ul {
    display: none; }
 *  .bg-menu {
    width: 100%; margin-top: 30px; }
 *  .bg-menu nav {
    width: 213px; text-align: center; }
 *  .head-parallax {
    width: 360px; height: 320px; }
 *  .parallax-viewport {
    width: 360px; height: 320px; }
 *  .blue-page {
    margin: 0px; position: relative; z-index: 99; }
 *  .bg-blue-top {
    z-index: 100; }
 *  .parallax-viewport li img {
    margin: 50px 0px 0px; }
 *  .parallax-layer {
    display: none; }
 *  .title-pages {
    line-height: 66px; } }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   459px) {
    #container { width: 320px; }
 *  .wrapper {
    width: 270px; }
 *  .logo {
    width: 100%; text-align: center; }
 *  .logo img,
    .logo a { float: none; width: auto; }
 *  .bg-menu nav ul {
    display: none; }
 *  .bg-menu {
    width: 100%; margin-top: 30px; }
 *  .bg-menu nav {
    width: 213px; text-align: center; }
 *  .head-parallax {
    width: 320px; height: 294px; }
 *  .parallax-viewport {
    width: 320px; height: 320px; }
 *  .blue-page {
    margin: 0px; position: relative; z-index: 99; }
 *  .bg-blue-top {
    z-index: 100; }
 *  .parallax-viewport li img {
    margin: 50px 0px 0px; }
 *  .bg-header-shadow {
    padding: 35px 0px 65px; }
 *  #container {
    margin: 0px auto; }
 *  .parallax-layer {
    display: none; } }
 * .icons .single-soc-share-link span:not(.counter) {
    display: none; }
 * *,
    ::before, ::after { box-sizing: border-box; }
 * .sf-menu,
    .sf-menu * { list-style: none; }
 * .sf-menu {
    line-height: 1; }
 * .sf-menu ul {
    position: absolute; top: -999em; width: 10em; }
 * .sf-menu ul li {
    width: 100%; }
 * .sf-menu li {
    float: left; position: relative; }
 * .sf-menu a {
    display: block; position: relative; }
 * .sf-menu {
    float: left; margin-bottom: 1px; }
 * .sf-menu a {
    padding: 0.75em 1em; text-decoration: none; }
 * .sf-menu li li {
    float: left; margin: 0px; width: 100% !important; border: none!
   important; padding: 0px !important; }
 * .sub-menu li a {
    width: auto; padding: 0px !important; font-size: 22px !important;
   background-image: none !important; color: rgb(255, 255, 255) !important; background-
   position: initial initial !important; background-repeat: initial initial !important;}
 * .sub-menu > li:last-child a {
    border: none; }
 * .sub-menu li a {
    margin: 1px 8px; display: block !important; padding: 6px 8px
   12px !important; color: rgb(255, 255, 255) !important; }
 * .sub-menu li {
    margin-left: 0px; padding-left: 0px; }
 * .sub-menu li:last-child {
    margin: 0px 0px 5px; }
 * .sub-menu .sub-menu {
    margin: 32px 0px 0px 10px !important; }
 * .sf-menu .sub-menu {
    padding: 25px 6px 0px !important; width: 167px !important;
   margin: -16px 0px 0px !important; }
 * .sub-menu .sub-menu {
    margin: 15px 0px 0px 5px !important; }
 * .sub-menu .menu-item {
    background-image: url(//escolabressolargenins.com/wp-
   content/themes/dreamy/script/menu/img/nav-center.png); background-position: initial
   initial; background-repeat: no-repeat repeat; }
 * body {
    background-color: rgb(205, 233, 247); background-attachment: fixed; background-
   image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/pattern.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/pattern.png));
   background-position: 0% 0%; background-repeat: repeat repeat; }
 * .bg-menu-left {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-left-blue.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-left-blue.png));
   background-position: initial initial; background-repeat: no-repeat no-repeat;}
 * .bg-menu nav {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-center-blue.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-center-blue.png));
   background-position: initial initial; background-repeat: repeat no-repeat; }
 * .bg-menu-right {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-right-blue.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-right-blue.png));
   background-position: initial initial; background-repeat: no-repeat no-repeat;}
 * .bg-blue-center-title {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-center.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-center.png));
   background-position: 0% 0%; background-repeat: repeat repeat; }
 * .bg-blue-top {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-top.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-top.png));
   background-position: 0% 0%; background-repeat: repeat no-repeat; }
 * .bg-blue-down {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-down.png](http://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-down.png));
   background-position: 0% 0%; background-repeat: repeat no-repeat; }
 * .sub-menu .menu-item {
    background-image: url([http://escolabressolargenins.com/wp-content/themes/dreamy/script/menu/img/nav-center-blue.png](http://escolabressolargenins.com/wp-content/themes/dreamy/script/menu/img/nav-center-blue.png))!
   important; background-position: initial initial !important; background-repeat:
   no-repeat repeat !important; }
 * body {
    color: rgb(32, 32, 32); }
 * With inline all css, works ok, with inline and defer I can’t see the map.
 *  Thread Starter [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9269294)
 * More info, I can see my flag on the map, and I can move, but I can’t see the 
   backgroud, streets, etc….
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9269327)
 * just tested in Firefox and the gMap loaded, also seems to work in [this webpagetest.org’s test (cfr. screenshot)](https://www.webpagetest.org/result/170628_RX_VDY/)?
   maybe only a problem for logged in users?
 *  Thread Starter [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9269807)
 * True, I tried with firefox and now are working, maybe any type of cache….but 
   still failing in Edge and Explorer…
 * [https://www.webpagetest.org/result/170628_1S_11G3/](https://www.webpagetest.org/result/170628_1S_11G3/)
 * [https://www.webpagetest.org/result/170628_XS_11K7/](https://www.webpagetest.org/result/170628_XS_11K7/)
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9270005)
 * darn, closed my Windows7 work PC half an hour ago and am off for 10d now, so 
   can’t look into that.
 * what you could do is exclude that specific page from Autoptimization, using a
   code snippet like this one;
 *     ```
       add_filter('autoptimize_filter_noptimize','isiarj_noptimize',10,0);
       function isiarj_noptimize() {
       	if (strpos($_SERVER['REQUEST_URI'],'contacte')!==false) {
       		return true;
       	} else {
       		return false;
       	}
       }
       ```
   
 *  Thread Starter [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9272237)
 * Sorry, but, where I need to put this code? in the css and defer window?
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9273068)
 * In “inline & defer” would not work as this is PHP-code, not CSS. The easiest (
   safest most end-user friendly) would be using [the code snippets plugin](https://wordpress.org/plugins/code-snippets/)
   [@isiarj20](https://wordpress.org/support/users/isiarj20/)
 *  Thread Starter [isiarj20](https://wordpress.org/support/users/isiarj20/)
 * (@isiarj20)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9274564)
 * I added to functions.php (as I found on google), I have another question, but
   I don’t know if it’s better to open another thread… tell me and I do.
 * You know why I’m obtaining less page speed insights punctuation with java optimization
   activated, if I’m obtaining less errors? When java optimization deactivated, 
   I receive about 15 errors that says, optimiza xxx.js yyy.js and zzz.js, with 
   java optimization activated I can see only 1 js error on autoptimize12903485173204571240.
   js file but with less result, about 5-10 points less.
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9274829)
 * hmm … first of all; I’m not that much into pagespeed, as it’s “just” an attempt
   to quantify (or gamify) the degree in which best performance practices are followed.
   In my optimization jobs I focus on “load time” in seconds as measured by e.g.
   [https://webpagetest.org](https://webpagetest.org).
 * now regarding the lower pagespeed score; you’re “forcing JS in head”, which is
   making it render blocking. untick that option (and troubleshoot any issue that
   might create) and you score will be better 🙂

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Moved box after css optimization’ is closed to new replies.

 * ![](https://ps.w.org/autoptimize/assets/icon-256X256.png?rev=2211608)
 * [Autoptimize](https://wordpress.org/plugins/autoptimize/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/autoptimize/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/autoptimize/)
 * [Active Topics](https://wordpress.org/support/plugin/autoptimize/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/autoptimize/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/autoptimize/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/moved-box-after-css-optimization/#post-9274829)
 * Status: not resolved