Portfolio desktop and mobile layout

  • Thanks for the great plugin! I would love if you could help me with a couple of annoying issues I’m having. Currently have wordpress 5.1.1 installed and am using a combo of Hestia template with Elementor Pro.

    I’ve having trouble getting the grid layout center aligned. The tabs are centered but the grid looks like it’s set to the left. I’ve tried a bunch of things, even copying the css from others that seemed to have the same experience. Also, on mobile the tabs don’t shrink at all and have way too much space in them. That means you have to scroll way down to start seeing the images.

    I would have thought this was Elementor but another site I have that does not use elementor is having the same issue. https://klwayman.com/older-work/

    I would prefer not to have to make a different portfolio for mobile. Do you have any suggestions for me?

    Thanks so much,

    Kris

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

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

    (@eleopard)

    Dear kris,

    Thanks for using the Portfolio Manager.
    As stated in the previous threads as well, the centering of the mosaic items can be done by knowing the precise page width. And since the page width depends on the Theme used, there is no consistent way for us to center the elements.

    In your case of https://designgenie.net/my-work/, please do the following to center it:

    1. In your WordPress backend, go to Portfolio manager > Settings > Advanced tab > Custon CSS Box.

    2. Paste the following and Save:

    .eds-bpm-main{
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}
@media only screen and (max-width: 1023px) {
	.eds-bpm-main{
		max-width: 750px;
	}
}
@media only screen and (max-width: 767px) {
	.eds-bpm-main{
		max-width: 500px;
	}
@media only screen and (max-width: 500px) {
	.eds-bpm-main{
		max-width: 250px !important;
	}
}

    This should center the mosaic on all the screens.

    Let me know if this works for you.

    Thread Starter pirate1227

    (@pirate1227)

    Perfect! Thanks so much, I really appreciate it.
    Any ideas on the mobile tabs? Or should I just make a second one just for mobile and remove the navigation tabs?

    Plugin Author eleopard

    (@eleopard)

    Oh Sorry for missing that.

    Just remove the previously pasted CSS with this one:

    .eds-bpm-main{
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}
@media only screen and (max-width: 1023px) {
	.eds-bpm-main{
		max-width: 750px;
	}
}
@media only screen and (max-width: 767px) {
	.eds-bpm-main{
		max-width: 500px;
	}
	.eds-bpm-option-set{
		display: none;
	}
}
@media only screen and (max-width: 500px) {
	.eds-bpm-main{
		max-width: 250px !important;
	}
}

    This should remove the tabs for screens smaller then iPad (767px and smaller)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Portfolio desktop and mobile layout’ is closed to new replies.