Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #195623

    Hi,

    I’m terribly sorry to have to start a new thread about this – the old one was closed when I *believed* the issue was solved, but in fact it was not.

    The issue was:

    I have two portfolios on my homepage, the topmost of which is a 1 Column Portfolio with a single large video item. When the viewport width of the browser is between 768 and 480 pixels wide, that 1 Column Portfolio resized to 50% width instead of full width (it’s properly full width above 768 and below 480) and left blank space in the right hand side 50%. Refer to the original post here:

    http://www.kriesi.at/support/topic/1-column-portfolio-displays-at-50-width-when-viewport-between-768-480-pixels/

    Ismael had posted a great solution, but it only fully worked for my homepage, which shows just one video, and not for my inside page with two videos in a gallery. Visit this inside “Reels” page and narrow the viewport down to between 768 and 480 pixels and you should see the issue:

    http://www.johndodelson.com/reels/

    The specific video may have been being targeted in the CSS Ismael gave me… I need a global solution for this website as other people are maintaining it, not me, so if anyone can take this any further I’d super appreciate it!

    Thanks so much,
    Steve

    Eunoia 1.6
    WordPress 3.7.1
    MacBook Pro 9,1
    OSX 10.8.5
    Chrome 31.0.1650.57
    Firefox 25.0.1
    Safari 6.1

    #195948

    Hi wyrostok!

    Why don’t you just have the portfolio set to one column? Is there a specific reason for that?

    Cheers!
    Devin

    #196409

    Devin,

    Thanks, I do have the portfolio set to one column, but at a viewport width between 768 and 480 the responsive layout breaks somehow and scales the one column at 50% width, and aligns it to the left side of the viewport, leaving the right hand 50% blank.

    Is anyone else having this problem?

    Thanks!
    Steve

    #196438

    Hi!

    Please try this:

    @media only screen and (min-width: 481px) and (max-width: 767px) {
    .post-entry-380 .slideshow_media_wrap {
    min-width: 478px;
    }
    
    #top  .post-entry-380 .slideshow_container ul {
    min-width: 478px;
    height: auto !important;
    }
    }

    Cheers!
    Ismael

    #196474

    Ismael,

    Nope – that re-broke the homepage at those widths, and created a different issue on the “Reels” page at those widths — have a look:

    http://www.johndodelson.com/
    http://www.johndodelson.com/reels/

    Thanks again,
    Steve

    #196597

    Hi!

    Please add it on the first code that I gave you. The code should look something like this:

    @media only screen and (min-width: 481px) and (max-width: 767px) {
    .post-entry-380 .slideshow_media_wrap {
    min-width: 478px;
    }
    
    #top  .post-entry-380 .slideshow_container ul {
    min-width: 478px;
    height: auto !important;
    }
    
    .post-entry-13 .slideshow_media_wrap {
    min-width: 478px;
    }
    
    #top  .post-entry-13 .slideshow_container ul {
    min-width: 478px;
    height: auto !important;
    }
    }

    Regards,
    Ismael

    #196769

    Ishael,

    Thanks again for trying to solve this – still a no-go.

    Using the code block above, the result I am getting works for the homepage but on the “Reels” page am still seeing this in all browsers , where the two videos should be atop each other (as they are when the viewport is larger than 768 or smaller than 480):

    Screenshot: http://www.johndodelson.com/reels.png
    Actual page: http://www.johndodelson.com/reels/

    Also, will this be a long term solution? It seems we’re trying to target individual posts and we will have more posts in the system and a content manager who is not super technical. If this code will need to be added to for a third, fourth reel, it’s not a sustainable model.

    Do we have any idea why this is happening?

    Thanks again,
    Steve

    #196893

    Hi!

    Have you tried placing the Portfolio Grid inside a Column Element? Use the 1/1 Column layout.

    Regards,
    Ismael

    #198185

    Hi Ismael,

    Thanks, I have not. Looking at the Column Element options in the template builder, I only see options for 2, 3 and 4 column layouts – what am I missing?

    Thanks again,
    Steve

    #198349

    Hey!

    I’m sorry I thought you’re using Enfold. Please post the login details here as a private reply.

    Regards,
    Ismael

    #198455
    This reply has been marked as private.
    #199000

    Hey!

    I just tried to login to admin dashboard but credentials you have provided does not seems to work. Can you please check once again?

    Best regards,
    Yigit

    #199707
    This reply has been marked as private.
    #199867

    Hey!

    Sorry for giving you a hard time. The solution is pretty simple. I added this on your Quick CSS:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
    .responsive #top .portfolio-entry-overview {
    width: 100%;
    margin-bottom: 0;
    }
    }

    Please remove browser cache then reload the page a few times. Test it on another browser.

    Regards,
    Ismael

    #200090

    Ismael,

    Thanks — that seems to work! I really appreciate it!

    Is this something the core theme code should include?

    Regards,
    Steve

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘1 Column Portfolio displays at 50% width when viewport between 768-480 pixels’ is closed to new replies.