Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 29, 2016 at 5:11 am #654589
    clairemartindigital

    hi guys,

    i’d like to know how i can display 2 columns & 100% width on mobile.

    example for mobile below:

    View post on imgur.com

    example for tablet below:

    View post on imgur.com

    Thanks!

    • This topic was modified 8 years, 4 months ago by clairemartindigital. Reason: forgot something
    June 30, 2016 at 11:17 am #655201
    Yigit

    Hi clairemartindigital!

    Please edit your color section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
#your-unique-id .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
#your-unique-id .flex_column.av_one_full { padding: 0 !important; }
#your-unique-id .av-masonry-entry { width: 50%; }}

    Best regards,
    Yigit

    June 30, 2016 at 3:56 pm #655338
    clairemartindigital

    Hi Yigit,

    that didn’t quite work yet. Still 1 column on mobile and still 3 columns on tablet. No 2 columns yet. And no full width yet. It also removed the padding on desktop which i would like to keep.

    Any other suggestions?

    Thanks

    June 30, 2016 at 5:49 pm #655401
    Vinay

    Hi,

    I have added a custom class “custom_col” to the masonry element but the caching or the security plugin which is currently active on your site is not letting the changes to reflect on the front end.

    Please deactivate all active plugins and check with the below css code. It should work fine.

    @media only screen and (max-width: 768px) {
    .custom_col .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
    .custom_col .flex_column.av_one_full { padding: 0 !important; }
    .custom_col .av-masonry-entry { width: 50%; }}

    Best regards,
    Vinay

    June 30, 2016 at 11:10 pm #655483
    clairemartindigital

    Hi Vinay,

    1 step closer. On tablet we now have the desired 2 columns. On mobile we still only have 1 column (should be 2 columns at full width.)

    Disabled plugins, had no effect. I was able to the the 2 columns prior to disabling plugins.

    P

    July 4, 2016 at 8:56 am #656417
    Andy

    Hi,

    try this code:

    @media only screen and (max-width: 768px) {
.custom_col .av-masonry-entry {
width: 50% !important;
}}

    Best regards,
    Andy

    July 4, 2016 at 11:38 am #656455
    clairemartindigital

    Hi Andy,

    thanks, much closer to what i am trying to achieve.

    The css i am using atm is below:

    @media only screen and (max-width: 768px) {
    .custom_col .container { width: 100% !important; max-width: 100%; padding:0 ; margin: 0; }
    .custom_col .av-masonry-entry { width: 50% !important;}
    }

    The final part missing is to also have the 2 columns go over full width on mobile. This is already the case on ipad. But i can’t seem to tweak it to also be full width on mobile. Any ideas?

    Thanks

    July 4, 2016 at 1:29 pm #656534
    Andy

    Hi,

    use this code:

    div#av-masonry-1 {
left: -27px;
}

    and adjust the width values from the codes above until it fits for you.

    Best regards,
    Andy

    July 4, 2016 at 1:44 pm #656553
    clairemartindigital

    Hi Andy, thanks but that is actually not doing what i was looking for…

    That code is move the position of the div which is containing the masonry element to the left/right…

    I don’t want to move it. What i would like to achieve is have the element display over the entire width of the mobile, like on the screenshot below (or like currently happening on tablet).

    View post on imgur.com

    July 4, 2016 at 1:50 pm #656563
    Andy

    Hi,

    use my last code, but add media queries into it: 

    @media only screen and (max-width: 768px) {
div#av-masonry-1 {
left: -27px;
width: 134%;
}}

    Adjust as needed.

    Best regards,
    Andy

    July 5, 2016 at 1:47 am #656797
    clairemartindigital

    Hi Andy,

    below works well with 1 remaining issue. The css is also applied to the blog posts on the homepage. The should only be applied to the projects list page.

    @media only screen and (max-width: 480px) {
    div#av-masonry-1 {
    left: -30px;
    width: 120%;
    }}

    July 5, 2016 at 7:44 am #656847
    Vinay

    Hi,

    To target specific pages we can use the page ID class. Each page in wordpress has a unique class name and to access it please right click on the page and check the class name in the body tag.

    @media only screen and (max-width: 480px) {
.page-id-2269 div#av-masonry-1 {
left: -30px;
width: 120%;
}}

    Best regards,
    Vinay

    • This reply was modified 8 years, 4 months ago by Vinay.
    July 5, 2016 at 12:02 pm #656961
    clairemartindigital

    Thanks Vinay!

    You can close this one.

    July 5, 2016 at 12:54 pm #657009
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘masonry portfolio items – how to display 2 columns & 100% width on mobile & ipad’ is closed to new replies.