Portfolio gallery in tab

[goodtimesmag]

I just marked the topic as not resolved!

[Mohammad – SUPPORT]

Hi,
Glad 🙂 that your issue resolved.
Thanks
Mohammad

[goodtimesmag]

Hi Mohammad,

I wanted to change the topic to not resolved, because the latest mentioned problem still exists.

[David Martin – Support]

Please stop thread bumping, oldest topics are answered first – each time you bump a thread you go to the back of the list.

You can test this:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
	.spb_tabs .tab-content .row ul.portfolio-items {
	    margin-right: -30px!important;
	}
	.spb_tabs .tab-content {
	    overflow-x: hidden;
	}
}

Thanks.

[goodtimesmag]

Thanks David, that did the job and solved the issue on my iphone.

But the look is still not perfect on my tablet and desktop sizes smaller than 1200px. Do I have to use another code here?

[David Martin – Support]

When mention “look” are you referring to the issue we are working on in the above post?

– What tablet are you using? Emulating on an iPad looks to work for me?

– Any screenshots, with a device reference will help.

Thanks.

[goodtimesmag]

Hi David,

yes, I am referring to the issue we are working on before. I just realized that the portfolio gallery doesn’t fit perfectly inside the tab on my tablet (iPad) and on desktop display sizes between 400px and 1200px (have a look on the screenshot).

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

For the iPad or iPad mini?

For the iPad, test this at the bottom of the CSS:

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
	.spb_tabs .tab-content .row ul.portfolio-items {
	    margin-left: -30px!important;
	    margin-right: -15px;
	}
	.spb_tabs .tab-content {
	    overflow-x: hidden;
	}
	.spb_tabs .tab-content .row [class*="span"] li {
	    width: 225px!important;
	}
}

Thanks.

[goodtimesmag]

Hi David,

I tested the code, but on both, landscape and portrait, the issue is still there (screenshot).

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

For the iPad or iPad mini?

– David.

[goodtimesmag]

I tested it on a iPad, but the issue also occurs on desktop sizes smaller than 1200px.

[David Martin – Support]

Hi,

This was not working correctly as the media query above in your CSS was missing a closing bracket, I have amended that and improved the CSS to this:

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
 .spb_tabs .tab-content .row ul.portfolio-items {
     margin-left: -30px!important;
     margin-right: -15px;
 }
 .spb_tabs .tab-content {
     overflow-x: hidden;
 }
 .spb_tabs .tab-content .row [class*="span"] li {
     width: 225px!important;
 }
}
/* iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.spb_tabs .tab-content .row [class*="span"] li {
    margin-left: 26px!important;
}
}

Thanks.

[goodtimesmag]

Perfect, thanks David!

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad