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: Flexform
• July 31, 2014 at 3:21 pm #96540
  KerplunkDesign

  Member

  Post count: 46

  Hello,

  I have three text block elements on my page that span across the width of the page. They each have an image with some text. When a browser is scaled from or viewed on a device between 979px and 768px the text doesn’t respond in a good way. It intrudes on the the next block of content on the right. Picture is attached. All other resolutions look great. Also, the menu wraps down another line when viewed between those resolutions. Picture is attached as well. Is there css or workaround to cover this problem?

  Any bit of advice is appreciated, thank you!

  Attachments:

  You must be logged in to view attached files.
  July 31, 2014 at 11:06 pm #96641
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  in that resolution interval do you want to show it like the image bellow?
  https://www.dropbox.com/s/zcyt5jsysee0h7b/layout.png

  -Rui

  August 4, 2014 at 2:02 pm #97471
  KerplunkDesign

  Member

  Post count: 46

  Yes! That would be good if I could achieve that.

  August 4, 2014 at 5:28 pm #97606
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Add the code bellow to you custom css options.

  @media (min-width:768px) and (max-width:979px) {
  .post-41 .wpb_text_column{
  width:100%!important;
  }

  -Rui

  August 4, 2014 at 6:13 pm #97620
  KerplunkDesign

  Member

  Post count: 46

  Perfect! Thank you!!

  August 4, 2014 at 7:39 pm #97663
  KerplunkDesign

  Member

  Post count: 46

  Sorry, I un-resolved this because I still have the menu problem.
  The code above fixed the content in the elements but not the menu.
  How can I get the menu/header to change to the mobile version in that resolution interval?

  August 5, 2014 at 12:57 pm #97924
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  I do not get this issue? See screenshot 1 and then screenshot 2 which is 1px narrower

  – Kyle

  Attachments:

  You must be logged in to view attached files.
  August 5, 2014 at 2:37 pm #97997
  KerplunkDesign

  Member

  Post count: 46

  Hello,
  I’m still getting the menu “wrapping” on Chrome and Safari. Screenshots attached. Both browsers are up to date and I have emptied the cache on them. Weirdly enough, Chrome Canary and Firefox are handling it correctly, as indicated in your screenshots.

  My screenshots show a Chrome browser with the pixel width at the bottom and the menu “wrapping” under itself.

  Still after emptying Safari and Chrome browsers cache.

  Any ideas on why this might still be happening?

  Attachments:

  You must be logged in to view attached files.
  August 5, 2014 at 2:45 pm #98007
  KerplunkDesign

  Member

  Post count: 46

  Most likely it is only happening locally to me. If so, then thats fine but still annoying.

  August 5, 2014 at 5:06 pm #98096
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Add the code bellow so the menu doesn’t wrap in that resolution interval.

  
  @media (min-width:768px) and (max-width:979px) {
  #main-navigation, #mini-navigation {
  margin-left: -20px!important;
  }
  }
  

  -Rui

  August 5, 2014 at 5:21 pm #98106
  KerplunkDesign

  Member

  Post count: 46

  Thank you! Thank you!

  August 5, 2014 at 5:23 pm #98108
  Melanie – SUPPORT

  Member

  Post count: 11032

  You’re welcome 🙂

• Back to forum

  Posted in: Flexform