Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 9, 2016 at 6:30 pm #629420
    mhiller

    I set my Max Container Width in “General Layout” => “Dimensions” to 80%, but I need the CSS to set Mobile Container Width to 120%. Yirgit was kind enough to give me the CSS below, which I thought had worked, but actually didn’t (in the meantime the ticket was closed). My dimensions in the Maximum Container width setting under the General Layout Tab is set to 80% (boxed layout). The CSS below (even when I increase the width from 100% to 130%) does not increase the container width and eliminate the “box” with an iPhone 5. Thanks for any further thoughts you might have! Mike.

    =====
    May 9, 2016 at 4:32 pm #629332

    Yigit
    Moderator
    Hey mhiller,

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
.container {
    width: 100% !important;
}}

    Best regards,
    Yigit

    ===========.

    May 11, 2016 at 10:41 am #630570
    Vinay

    Hey mhiller,

    May I know the purpose why you need the width to be more than the screen width in mobile view? setting it to 120% will make the content not visible unless users scroll horizontally and might cause major alignment issues. Please let us know the exact reason so we can find out a workaround for your issue.

    Please use the below css to make the container 100% wide in portable devices.

    @media only screen and (max-width: 768px) {
.responsive .boxed#top {
   width:100%;
}}

    Best regards,
    Vinay

    May 11, 2016 at 10:55 am #630585
    mhiller

    To answer your question:, I want to use a boxed layout when the site is viewed on a PC (80% Container), but when the site is viewed on an iPhone, I want the text to be full screen width (no box layout visible). Any suggestions you have on how to solve this issue would be appreciated. Website is: http://www.superquickcourse.com Mike.

    May 12, 2016 at 6:12 am #631142
    Rikard

    Hi Mike,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .responsive .boxed#top {
    width: 100% !important;
    max-width: 100% !important;
}

    Thanks,
    Rikard

    May 12, 2016 at 7:55 am #631179
    mhiller

    Thanks. The code made both full screen view and responsive view display “no box,” but I added the “media only” line below and now it works! Thanks!

    @media only screen and (max-width: 768px) {.responsive .boxed#top {
    width: 100% !important;
    max-width: 100% !important;
}}
    May 13, 2016 at 4:58 am #631776
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Need the CSS to set Mobile Container Width to 120%’ is closed to new replies.