Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 10, 2017 at 7:15 pm #837121
    ccyran

    Hey guys!

    Website: ccyran.com

    On the homepage, when past 1600px browser width, I don’t want the image to keep expanding. Currently I have this CSS, which almost works. The only problem isn’t. It doesn’t center the image vertically and horizontally.

    Can you fix the CSS im using?

    @media only screen and (min-width: 1000px) {
    .homepage {
    max-width: 1600px;
    margin: 0 auto;
    }
    }

    Thanks!
    Chris

    August 12, 2017 at 11:54 pm #838076
    Mike

    Hey ccyran,
    Try removing your padding around the image (200px 150px 150px 150px)
    and try this code:

    .homepage {
max-width: 50%!important; 
left: 25% !important;
padding-top: 200px !important; 
padding-bottom: 200px !important; 
margin: 0 auto;
}
@media only screen and (max-width: 1023px) { 
.homepage {
max-width: 100%!important; 
left: 0px !important;
padding-top: 100px !important; 
padding-bottom: 100px !important; 
margin: 0 auto;
}}

    Best regards,
    Mike

    August 13, 2017 at 12:27 am #838081
    ccyran

    Hey Mike,

    I tried that but it looks like the images lose the padding and go fullwidth instead when its below 1023 pixels. I have it live now with your CSS if you want to look at it. I’d also like the images to be about 10-20% bigger :)

    • This reply was modified 7 years, 3 months ago by ccyran.
    August 13, 2017 at 12:53 am #838092
    Mike

    Hi,
    Oh, ya that was my error, I thought that was what you wanted :)
    So do you never want it full width, phone?
    Try:

    .homepage {
max-width: 80%!important; 
left: 25% !important;
padding-top: 200px !important; 
padding-bottom: 200px !important; 
margin: 0 auto;
}
@media only screen and (max-width: 425px) { 
.homepage {
max-width: 100%!important; 
left: 0px !important;
padding-top: 100px !important; 
padding-bottom: 100px !important; 
margin: 0 auto;
}}

    Try adjusting the first max-width% & left% to center, the bottom one is now for phones, if you don’t want that just remove it :)

    Best regards,
    Mike

    August 13, 2017 at 4:30 am #838114
    ccyran

    Hey Mike,

    This is PERFECT!!!! Thanks so much. I really appreciate your help on this, and on my 20 other posts haha. You rock.

    Im asking here because I feel like maybe there’s a similar solution, but I want the masonry gallery on my work page to stay centered once the browser gets wider, right now, it locks to the left side.

    Work

    Let me know if we can solve this here, or if I should open a new thread!

    August 13, 2017 at 3:31 pm #838233
    Mike

    Hi,
    Thanks for your kind words, were just glad to help :)
    OK, so to center your gallery above 2k try this:

    @media only screen and (min-width: 2000px) { 
.page-id-2269 #av-masonry-1 { margin-left: 18vw!important; }}

    But I was having trouble seeing the images at that size, I’m thinking there is some CSS I should know about, mainly “only-desktop” on your top grid row.
    Or maybe it’s just my connection today :)
    Can I ask why you have two masonry galleries on that page, one in a grid row and one not? Perhaps we can adjust just one to do what you want?
    If you try my code and it works fine for you, then it was my connection and we’ll be happy.
    Otherwise please see screenshots in Private Content area.

    Best regards,
    Mike

    August 14, 2017 at 6:46 am #838455
    ccyran

    Hey Mike,

    The one thats in the grid row only appears on mobile, and thats because I want it to be fullscreen.
    I tried the code but no luck :/ Is the “18vw” a typo? Also, I want it to not expand past 1600px.

    **Update** In an older thread, I got a solve for it. It’s

    #top .av-masonry-container {
    float: none;
    margin: 0 auto;
    }

    Thanks! You can close this thread now. Appreciate all the help!
    Chris

    • This reply was modified 7 years, 3 months ago by ccyran.
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Keep images centered with CSS’ is closed to new replies.