hi,

I'm experiencing some troubles with the mobile version of my site, can't figure out whether is a issue of the cms or my mistake, could you please kindly help me find the bug here?

this is the page: http://www.designdiverso.com/contact.php

The page is totally fine on desktop view however in mobile version seem unable to work properly and load the necessary files.

Any hint is truly appreciated

p.s.

I tried to add: media="all" to no avail

[KK]

Hi,

On the desktop, at full window the page appears fine but resize the browser and after a particular size the CSS disappears. Clearly it is a front-end issue as the server is not in the scene at all.

Perhaps you should scrutinize the media queries you are using for the different devices?

Hi,

On the desktop, at full window the page appears fine but resize the browser and after a particular size the CSS disappears. Clearly it is a front-end issue as the server is not in the scene at all.

Perhaps you should scrutinize the media queries you are using for the different devices?

thank you so much for your reply, I've tried adding: media="all"
to this <link rel="stylesheet" href="dist/css/contacxxxxx.css" id="main-styles" />

to no avail, it's weird cause all the other pages work fine with the css fle linked in the same way.

what do you mean by "media queries" otherwise?

for responsive websites you will be applying rules to particular screen sizes in your CSS ....

To target screens 1200px and upwards for example you would use a media query like this ...

Code: Select all

@media (min-width: 1200px) { 
   
    nav {
        font-size: 28px;
    }   
   
}

for responsive websites you will be applying rules to particular screen sizes in your CSS ....

To target screens 1200px and upwards for example you would use a media query like this ...

Code: Select all

@media (min-width: 1200px) { 
   
    nav {
        font-size: 28px;
    }   
   
}

thank you, I've those in my css but this doesn't solve my issue, all the other pages work fine and I can't pinpoint what is wrong with this one, it used to work earlier on..

Do you have any other hint?

hi diverso - I was curious and looked at the contact page CSS - the brackets don't look right for the media query at l.484 .... it could be that this is causing everything following this declaration to only apply to min-width: 48.063em ...

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven .content, .contact-locations .tampere .content, .contact-locations .vancouver .content {
      padding: 0 1.250em; } }
  .contact-locations .new-haven .content .align, .contact-locations .tampere .content .align, .contact-locations .vancouver .content .align {
    width: 99.9%; }

Another thing ... your h1 is nested within itself ...

Good luck!

Code: Select all

        <h1 class="title"><h1 class="title">Valmis lis&auml;&auml;m&auml;&auml;n oman tuotemerkin kokemusta?</h1>
</h1>

hi diverso - I was curious and looked at the contact page CSS - the brackets don't look right for the media query at l.484 .... it could be that this is causing everything following this declaration to only apply to min-width: 48.063em ...

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven .content, .contact-locations .tampere .content, .contact-locations .vancouver .content {
      padding: 0 1.250em; } }
  .contact-locations .new-haven .content .align, .contact-locations .tampere .content .align, .contact-locations .vancouver .content .align {
    width: 99.9%; }

Another thing ... your h1 is nested within itself ...

Good luck!

Code: Select all

        <h1 class="title"><h1 class="title">Valmis lis&auml;&auml;m&auml;&auml;n oman tuotemerkin kokemusta?</h1>
</h1>

Thank you for your curiosity and interest again, I just don't understand how that can be the issue if it was working fine earlier with the same queries, all the rest of the pages has those same queries and are looking and working fine on mobiles, only contact page doesn't work...

Anyone has a better idea or perhaps solution?

but did you try changing it?

from

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven .content, .contact-locations .tampere .content, .contact-locations .vancouver .content {
      padding: 0 1.250em; } }
  .contact-locations .new-haven .content .align, .contact-locations .tampere .content .align, .contact-locations .vancouver .content .align {
    width: 99.9%; }

to

Code: Select all

     @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven .content, .contact-locations .tampere .content, .contact-locations .vancouver .content {
      padding: 0 1.250em; }
  .contact-locations .new-haven .content .align, .contact-locations .tampere .content .align, .contact-locations .vancouver .content .align {
    width: 99.9%; }  }

Hi,

This is not a CouchCMS problem but rather an implementation problem, the others are correct in saying it's the CSS media queries. If you look at another page, for example - http://www.designdiverso.com/about.php

You are correct that each pages CSS has the same media queries, however it seems that each page has its own CSS file with slight changes. It would seem as though contact.css has an error within its media CSS that is rendering all css inside of the query found at line 468.

You can confirm this by opening google chrome to the contact page, you will need to be familiarised with the inspect element feature. Find yourself within inspect element to the mobile menu icon, on the contact page this icon isn't seen (but it's there in inspect element). If you're viewing on desktop, you can click on the <span> inside the menu icon and you'll see it has the attached styles:

Code: Select all

@media screen and (min-width: 48.063em)         contact.839359103.css:468
.nav-black .toggle.menu span {                  contact.839359103.css:1589
  color: #fff;
}

So inspect element is telling you that on desktop sites, the menu icon has that css style. It also tells you that it's inside a media query (Started at line 468) and the css rule is on like 1589. (Clearly the media query is still open all the way down at line 1589).

Please check line 468 of "contact.839359103.css" You will see the following:

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
      padding: 0.625em 0.625em 1.250em;
      width: 33.3%;
      border-left: solid 1px #fff; }
      .contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
        border-left: none; }
     /* .contact-locations .new-haven:after, .contact-locations .tampere:after, .contact-locations .vancouver:after {
        opacity: 0; } }*/

It would seem that the original closing bracket for the media query is within the commented line shown above, which is why the media query is not closed for the rest of the css file.

Please add a closing curly bracket for the media query, so it looks like this (If you wish to close the query here):

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
      padding: 0.625em 0.625em 1.250em;
      width: 33.3%;
      border-left: solid 1px #fff; } 
      .contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
        border-left: none; } }
     /* .contact-locations .new-haven:after, .contact-locations .tampere:after, .contact-locations .vancouver:after {
        opacity: 0; } }*/

I'll post that again so I can show where I added the closing bracket:

@media screen and (min-width: 48.063em) {
.contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
padding: 0.625em 0.625em 1.250em;
width: 33.3%;
border-left: solid 1px #fff; }
.contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
border-left: none; } }

Again, this is just a standard CSS issue and not couch related, but I hope we've been able to help

Hi,

This is not a CouchCMS problem but rather an implementation problem, the others are correct in saying it's the CSS media queries. If you look at another page, for example - http://www.designdiverso.com/about.php

You are correct that each pages CSS has the same media queries, however it seems that each page has its own CSS file with slight changes. It would seem as though contact.css has an error within its media CSS that is rendering all css inside of the query found at line 468.

You can confirm this by opening google chrome to the contact page, you will need to be familiarised with the inspect element feature. Find yourself within inspect element to the mobile menu icon, on the contact page this icon isn't seen (but it's there in inspect element). If you're viewing on desktop, you can click on the <span> inside the menu icon and you'll see it has the attached styles:

Code: Select all

@media screen and (min-width: 48.063em)         contact.839359103.css:468
.nav-black .toggle.menu span {                  contact.839359103.css:1589
  color: #fff;
}

So inspect element is telling you that on desktop sites, the menu icon has that css style. It also tells you that it's inside a media query (Started at line 468) and the css rule is on like 1589. (Clearly the media query is still open all the way down at line 1589).

Please check line 468 of "contact.839359103.css" You will see the following:

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
      padding: 0.625em 0.625em 1.250em;
      width: 33.3%;
      border-left: solid 1px #fff; }
      .contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
        border-left: none; }
     /* .contact-locations .new-haven:after, .contact-locations .tampere:after, .contact-locations .vancouver:after {
        opacity: 0; } }*/

It would seem that the original closing bracket for the media query is within the commented line shown above, which is why the media query is not closed for the rest of the css file.

Please add a closing curly bracket for the media query, so it looks like this (If you wish to close the query here):

Code: Select all

  @media screen and (min-width: 48.063em) {
    .contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
      padding: 0.625em 0.625em 1.250em;
      width: 33.3%;
      border-left: solid 1px #fff; } 
      .contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
        border-left: none; } }
     /* .contact-locations .new-haven:after, .contact-locations .tampere:after, .contact-locations .vancouver:after {
        opacity: 0; } }*/

I'll post that again so I can show where I added the closing bracket:

@media screen and (min-width: 48.063em) {
.contact-locations .new-haven, .contact-locations .tampere, .contact-locations .vancouver {
padding: 0.625em 0.625em 1.250em;
width: 33.3%;
border-left: solid 1px #fff; }
.contact-locations .new-haven:first-child, .contact-locations .tampere:first-child, .contact-locations .vancouver:first-child {
border-left: none; } }

Again, this is just a standard CSS issue and not couch related, but I hope we've been able to help

thank you so much for your help, that did it, while I totally understand this is a "development" problem you too need to try and comprehend that I choose couch CMS as it "seemed" an easier solution to develop an already existing static version of this project, which was working fine, files are mostly the same and somehow I'm having all those issue now, so your help is truly appreciated.