Rearranging mobile homepage portfolio

  • Author
    Posts
  • #80810
    pssethi
    Member

    Hello,

    Is there any way to rearrange the homepage portfolio so that (just on mobile) the pictures are stacked on top of each other? I only have three photos on my homepage, and I am not happy with the way the mobile site configuration looks (two on one line, one on the second line on the left).

    Thank you so much!

    The blog I need help with is: (visible only to logged in users)

    #81015
    calvinjamescoles
    Theme Author

    Hello!

    If you have the Premium WordPress account, can you try adding this code to your custom CSS field?

    @media only screen and (max-width: 768px){
    #gallery ul li {
        width: 100%;
    }}

    Let me know if that works!

    #81018
    pssethi
    Member
    Original poster

    Hi!

    Thank you so much for responding to me. This didn’t change the orientation of the pictures. They’re still showing up for me as two on the top and one on the bottom left. Here is the code I have, based on your suggestion:

    #list-btn,
    #primary > div.maincontent-wrap > article > div.entry-thumbnail > div.entry-header > div.entry-details,
    #primary > article > header.entry-header > div.entry-details {
    display: none !important;
    }

    @media only screen and (max-width: 768px){
    #gallery ul li {
    width: 100%;
    }}

    #81020
    pssethi
    Member
    Original poster

    Hi! I added an important tag, and it worked. Thank you so, so much!

    I actually have another request, if you have time: I would like to reduce the space before the social media icons on the left sidebar. I have tried changing the margin, but it keeps moving the icons and email to the right. Here is the code I’ve been working with:

    div.contact {
    margin: 5% !important;
    }

    #81060
    calvinjamescoles
    Theme Author

    Hey!

    Try this CSS as well:

    .contact {
        margin-top: 10px !important;
    }

    Let me know if that works!

    #81095
    pssethi
    Member
    Original poster

    Hi!

    I tried the code you gave me, but it didn’t work. The code below worked, but then I lost the scroll bar for the left sidebar.

    .contact {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0 !important;
    width: 100%;
    margin-top: 30px !important;
    min-width: 100%;
    }

    #81129
    calvinjamescoles
    Theme Author

    Hey!

    That looks like it works – the left scrollbar should only be visible when needed in most browsers, so maybe by removing some of this vertical space it made it no longer necessary?

    #81130
    pssethi
    Member
    Original poster

    Could you please help me get the scroll bar back? I’m not sure what to add to the code above to make it come back.

    Also, I apologize but I have ONE more request: I would love for – on smaller screen sizes, such as an iPad – that the photos stay as they are on larger screens (three across, not two on top and one on the bottom). Could you please help me modify the code you sent to do that?

    Thank you so, so much. I really appreciate your help!

    @media only screen and (max-width: 768px){
    #gallery ul li {
    width: 100%;
    }}

    #81131
    pssethi
    Member
    Original poster

    Wow! What timing! When I make the screen size smaller, the scroll bar doesn’t come up for me. Do you see it on your end? psimransethi.wordpress.com

    #81140
    calvinjamescoles
    Theme Author

    Sorry for the wait! I’ not sure about the scroll bar, I’m not sure this would be related to the script I gave you. Did you try removing it to see if this brings the scroll bar back?

    Unfortunately I don’t have a code snippet to stop the plugin from resizing based on screen width, but I can add it to our feature request list!

    #81146
    pssethi
    Member
    Original poster

    I tried the code you gave me, but it didn’t work. So I used this code, but the scroll bar went away:

    .contact {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0 !important;
    width: 100%;
    margin-top: 30px !important;
    min-width: 100%;
    }

    When I take this code away, the scroll bar comes back, but the social media icons and email go back down to the bottom left of the page.

    It would be wonderful if you could add this to the feature request list. I have made the site live (simransethi.com), but I still very much want to fix this.

    Thank you!

    #81148
    calvinjamescoles
    Theme Author

    Thanks! One last question, which browser are you using?

    #81149
    pssethi
    Member
    Original poster

    I’m using Chrome and Firefox. Thank you!

    #81160
    calvinjamescoles
    Theme Author

    Thanks! I’ve added this to our feature request list, we’ll see if we can get it included by default!

    #81161
    pssethi
    Member
    Original poster

    Thank you!

  • The topic ‘Rearranging mobile homepage portfolio’ is closed to new replies.