Centering the whole grid.

  • Resolved philwiener

    (@philwiener)


    7 years, 9 months ago

    Hi there,

    (I know you answered before, but now I create a new website and get the same issue … would be too cool if you could help me again).

    I installed the plugin on my new website (https://philwiener.com/#portfolio) and styled it a bit. Let me say that I really enjoy your plugin (tried a few Be-portfolio-plugins before, but yours is the best one!).

    Now I would love to always center the whole grid – even when it rearranges by resizing the window size. Last time you were so kind to provide the following CSS, but unfortunately I am too stupid to adjust it for the new situation (website). I know that this is not an issue or a bug, so I’d be happy to donate to something …?

    Best regards & thanks in advance,
    Phil

    That’s the code you provided last time (you can still see it working on my old website: https://2014.philwiener.com/#portfolio):

    .eds-bpm-main {
    margin-left: auto;
    margin-right: auto;
    }

    @media only screen and (min-width: 960px) and (max-width: 1199px) {
    .eds-bpm-main {
    max-width: 700px;
    }
    #portfolio .subheadline-negative {
    margin-left: 90px
    }
    }

    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .eds-bpm-main {
    max-width: 464px;
    }
    #portfolio .subheadline-negative {
    margin-left: 90px;
    }
    }

    @media only screen and (max-width: 767px) {
    .eds-bpm-main {
    max-width: 232px;
    }
    #portfolio .subheadline-negative {
    text-align: center;
    }
    }

    • This topic was modified 7 years, 9 months ago by philwiener.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear Phil,

    Apologies for the delayed reply due to the weekends.

    Please paste the following CSS in Custom CSS box in Portfolio Manager > Settings > Advanced Tab:

    .eds-bpm-main {
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width: 1020px) and (max-width: 1260px) {
	.eds-bpm-main {
		max-width: 960px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1019px) {
	.eds-bpm-main {
		max-width: 720px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 799px) {
	.eds-bpm-main {
		max-width: 480px;
	}
}
@media only screen and (max-width: 767px) {
	.eds-bpm-main {
		max-width: 232px;
	}
}

    For the headings, I’d suggest you to make them centered, as there is no unique class on top of it this time, to provide custom margins.

    Note: the heading can be also perfectly aligned, if you would add a Custom CSS class to the portfolios (e.g. portfolio-block).

    You can check this screenshot to see where to add class:

    Adding Custom Class in Fusion Page Builder Blocks

    Please let me know if this works.

    Plugin Author eleopard

    (@eleopard)

    In case you do add the CSS class, please let me know and I’ll provide you the updated CSS accordingly.

    Thread Starter philwiener

    (@philwiener)

    Hi eleopard,

    many thanks again for you great help!
    Your code works perfectly for the grid so far.

    Because I don’t know whether I add the CSS class to the whole portfolio CONTAINER or just to the COLUMNS which contain the headings, I actually did both (to be safe):
    the CSS Class for whole Portfolio Container: portfolio-container
    the CSS Class for the columns: portfolio-column

    Many thanks for your help!
    Phil

    Plugin Author eleopard

    (@eleopard)

    Yes this works.
    Please remove the previously added CSS, and add the following:

    .portfolio-column {
	margin-left: auto !important;
	margin-right: auto !important;
}
.portfolio-column h5{
	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 h5{
		text-align: center;
		margin-left: 0;
	}
}

    This should take care of both centering of the gird, as well as alignment of the headings.

    • This reply was modified 7 years, 9 months ago by eleopard.
    Thread Starter philwiener

    (@philwiener)

    Wow, that’s too great! Works perfectly.

    Many thanks, your support is the absolute benchmark!
    Best regards,
    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Centering the whole grid.’ is closed to new replies.