ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Joyn
• November 18, 2015 at 11:36 pm #229793
  mfleetwood

  Member

  Post count: 12

  Hi there
  I have made various changes to the css of my theme for different colors and logos to be used on different pages. This is working perfectly on desktop viewing, however on the mobile version, these changes are not in effect. The standard white “top bar” color is used.
  1. How can I change the settings so that the different logos and top bar colors are also used in mobile / tablet viewing ?

  Also, I have a problem with my “about us” page, it is showing correctly on desktop, but on mobile, the right half of the page is missing.
  2. How can I change the settings so that this page is correctly visible on mobile and tablet devices?

  3. How can I decrease the size of the logo on mobile devices?

  Your help will be greatly appreciated
  thank you so much

  November 20, 2015 at 11:44 am #230177
  David Martin – Support

  Moderator

  Post count: 20834

  1) You will need to use the appropriate media queries for different screen sizes or device. A great list of what to use can be found here: http://stephen.io/mediaqueries/

  2) This is caused by your custom code, it has made the responsive CSS not work correctly. You have specified exact px widths for divs which is causing the problem. For example:

  .page-id-13069 .spb-row-container.remove-element-spacing .row {
      width: 800px;

  This is not great practice, I would suggest you use something like width: 100%; max-width: 800px;

  3) Please use this example:

  #mobile-logo.has-img {
      max-width: 30%;
  }

  Thanks,
  David.

  November 24, 2015 at 8:44 pm #231083
  mfleetwood

  Member

  Post count: 12

  This reply has been marked as private.
  November 25, 2015 at 6:15 pm #231351
  David Martin – Support

  Moderator

  Post count: 20834

  I cannot login with those details, looks like I need to login to actually view the page.

  Cheers,
  David.

  November 25, 2015 at 11:35 pm #231398
  mfleetwood

  Member

  Post count: 12

  This reply has been marked as private.
  November 26, 2015 at 4:25 pm #231579
  David Martin – Support

  Moderator

  Post count: 20834

  For an iPad mini, this should help you:

  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px)
  and (-webkit-min-device-pixel-ratio: 1)  {
  .page-id-13356 #logo.has-img a {
      background-size: 80%!important;
  }
  }

  Thanks.

• Back to forum

  Posted in: Joyn