[Vanessa HParticipant]

Hi Support,

I am using a boxed layout on my site, but want to make it full width when viewed on an iPhone. I am wondering if there is an @media query I can write to turn on/off the boxed layout?

Thank you very much!

~Vanessa

[RubinKeymaster]

Hey Vanessa,

since our theme is responsive depending on if you have selected full width or boxed the mobile version will inherit those stylings so it would require a lot of CSS to make this happen which we do not recommend. Tell me how you want to proceed.

[Vanessa HParticipant]

Any recommendation from Support is highly regarded, so I’ll leave things be. =)

Thanks for the explanation though!

[RubinKeymaster]

You’re welcome!

[Berkin EParticipant]

I applied the following code on my site to do just that. It seems to work fine.

@media (max-width: 979px) {
  .site,
  .x-navbar.x-navbar-fixed-top.x-container-fluid.max.width {
    width: 100%;
  }
}

[KoryKeymaster]

Hey Berkin,

Thanks for writing in! As long as that’s working for you, that’s great. We were concerned with other constraints such as image sizing, how shortcodes behave on certain sizes, et cetera. However, if you don’t seem to be having any problems with this, then we’re glad to hear it. 🙂

[DeepakParticipant]

It would be great if X came with this functionality in the next release. Having a full width layout on phone would be great. I am sure this is doable as the other theme I am using plays nicely with switching full width on phone and boxed on desktops. X has a great team and am sure it won’t be a big task for the guys. Looking forward to it. 🙂

Example: http://artbees.net/themes/jupiter-demo/

[Kosher KMember]

Hi Deepak,

Thanks for writing in,

We’ll add that on additional feature list for future updates,

Thanks for the comment

[DeepakParticipant]

Thanks! Will be looking forward to this awesome feature.

[Paula SMember]

Thanks as well! We always make sure to keep you guys posted on the latest version like in this new thread for X 2.3.0 🙂 http://theme.co/x/member/forums/topic/release-notes-x-v2-3-0-x-shortcodes-v2-3-4/. Feel free to post if you have any further questions / suggestions! Have a great day.

[tylersbrown01Participant]

WOW I just applied the above code and it totally worked! This is so awesome this is a feature I’ve wanted for so long but have never been able to figure it out. MAJOR props to you Berkin E

[Rue NelModerator]

Thanks for letting us know that it has worked for you.

[janihParticipant]

Hi,

Thanks for the great tip Berkin E

Does anybody have an idea how to make it even better by first hiding background from the view and only after that scaling content and sidebar if necessary?

Like wptavern.com has: http://wptavern.com/ (resize your browser window to see the effect)

[ThaiModerator]

Hi @janih,

It’s possible by Custom CSS.

Would you mind providing us with your website URL so we can take a closer look?

Thank you.

[janihParticipant]

This reply has been marked as private.

[Author]

Posts