Desktop to Mobile View Transistion Point

SimonPhillpotts

Hi, I have a query about the size at which my site transforms from desktop to mobile format.

www.quercyphotoholidays.fr

As I shrink the desktop page down my logo starts to interfere with the social icons and my translate bar (which looks bad when simulated for tablet view). After overlapping for a while the site transforms to its mobile view. Is there a way of altering this transition point? Alternatively can my logo be set to stretch to fit the available space without overlapping adjacent containers?
Many thanks in advance!

Hikin' Mike

First off, you have an missing bracket here:

/*  ================
      = SmartPhones        =
      ================
     For screens large enough, add the word "Download" after the download button */
@media only screen and (min-width: 1200px) {
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }

It should look like this:

/*  ================
      = SmartPhones        =
      ================
     For screens large enough, add the word "Download" after the download button */
@media only screen and (min-width: 1200px) {
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }
}

Once you fix that, you can add this. It will allow your Translation, Logo, and Social buttons in your header to have their own row up to 800px.

/* Switches Translation, Logo and Social to 3 rows @800px or smaller */
@media screen and (max-width: 800px) {

  .sm-user-ui .sm-page-layout .sm-page-layout-row,
  .sm-user-ui .sm-page-layout .sm-page-layout-region,
  .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column {
    display: block !important;
    width: 100% !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    float: none !important;
  }

}

SimonPhillpotts

That's great Mike, thanks very much for your help!