• Resolved philwiener

    (@philwiener)


    Hey eleopard,

    let me first repeat again, that I love your plugin very much –?I tested a lot of Behance portfolio plugins before I finally came to yours —> yours is by far the best one.

    A while ago, you were so kind to deliver me the following CSS to make the grid and the h3 on my website responsive:

    /* Own CSS Class > Grid: Position + Responsivity */
    .portfolio-column {
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .portfolio-column h3 {
    margin-left: 10px;
    }
    @media only screen and (min-width: 1020px) and (max-width: 1260px) {
    .portfolio-column {
    max-width: 960px;
    }
    }
    @media only screen and (min-width: 800px) and (max-width: 1019px) {
    .portfolio-column {
    max-width: 720px;
    }
    }
    @media only screen and (min-width: 768px) and (max-width: 799px) {
    .portfolio-column {
    max-width: 480px;
    }
    }
    @media only screen and (max-width: 767px) {
    .portfolio-column {
    max-width: unset;
    }
    .eds-bpm-main{
    max-width: 232px;
    margin-left: auto;
    margin-right: auto;
    }
    .portfolio-column h3 {
    text-align: center;
    margin-left: 0;
    }
    }

    NOW HERE IS MY QUESTION:
    When I resize the width of the browser window, I am totally happy with the reordering results in 4 columns and in 3 columns. But when I decrease the browser window’s width until 2 long (thumb) columns show up, I would appreciate the thumbs and h2 to center on the page (just like it happens when just 1 column shows up …). Unfortunately I am too stupid to reach this result myself –?could you help again?

    Many thanks in advance!
    Phil

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear Phil,

    Thanks for such good words ??

    Regarding the centering of elements, please replace the previous CSS with the following:

    .portfolio-column {
    	margin-left: auto !important;
    	margin-right: auto !important;
    }
    .portfolio-column h3 {
    	margin-left: 10px;
    }
    @media only screen and (min-width: 1020px) and (max-width: 1260px) {
    	.portfolio-column {
    		max-width: 960px;
    	}
    }
    @media only screen and (min-width: 800px) and (max-width: 1019px) {
    	.portfolio-column {
    		max-width: 720px;
    	}
    }
    @media only screen and (min-width: 768px) and (max-width: 799px) {
    	.portfolio-column .eds-bpm-main{
    		max-width: 480px;
    		margin: 0 auto;
    	}
    	.portfolio-column .fusion-text{
    		text-align: center;
    	}
    }
    @media only screen and (max-width: 767px) {
    	.portfolio-column {
    		max-width: unset;
    	}
    	.eds-bpm-main{
    		max-width: 232px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	.portfolio-column h3 {
    		text-align: center;
    		margin-left: 0;
    	}
    }

    Let me know if this works.

    Thread Starter philwiener

    (@philwiener)

    Hey, that was quite fast!
    Many thanks for that —> works perfectly.

    Best,
    Phil

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Grid Responsivity’ is closed to new replies.