Desktop to Mobile View Transistion Point

SimonPhillpotts · April 25, 2024

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 · April 25, 2024

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 · April 26, 2024

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

Desktop to Mobile View Transistion Point

Comments