Mobile view

thepicturebar · Member · Oct 21, 2016 at 4:35 am
Copy link

Add topic to favorites
1. https://thepicturebar.com how do i fix the portfolio section on the home
page? i would want the padding on left & right to go & have the thumbnails
bigger but in 1 row itself as they are now. Also the portfolio thumbnails are
getting jumbled up on the mobile site. How do I fix that?

2. The testimonials page https://thepicturebar.com/testimonials/ is getting
repeated on the mobile site. How do I fix it?

http://www.thepicturebar.com

The blog I need help with is: (visible only to logged in users)
innisfreehomestead · Member · Oct 21, 2016 at 7:04 pm
Copy link
Hello there!

Dropping this code in your custom CSS area should do the trick:
1.
```
#front-page-portfolio .four {
	padding: 0px;
}
```
2. I’m not seeing the page be repeated anymore on mobile, did you solve that issue? However, using a background image for the content isn’t very good for SEO or readability on mobile devices, the text gets so small. I suggest dropping the blocks in as content and then using the water and mountains etc picture as just the background image.

Let me know if that doesn’t work!
Sage
thepicturebar · Member · Oct 22, 2016 at 12:10 am
Copy link
Hi,

I have already used the code

#front-page-portfolio .four {
padding: 0px;
}

and that’s how the portfolio area looks post adding it.
I still am unable to get rid of the excessive left & right padding (orange area)
innisfreehomestead · Member · Oct 22, 2016 at 12:34 am
Copy link
Hi there,

I’m not seeing that code on the page even to be overwritten, but if it is you could try making it !important.

Like so:
```
#front-page-portfolio .four {
	padding: 0px !important;
}
```
Hope that helps,
Sage
thepicturebar · Member · Oct 22, 2016 at 6:22 am
Copy link
Hi,

This takes of the padding from in between the thumbnails. I am looking to get rid of the extra space on the left & right of the first & last thumbnail.

Thanks
innisfreehomestead · Member · Oct 22, 2016 at 5:09 pm
Copy link
Ah,

Sorry, I think I understand now.

How’s this?
```
#front-page-portfolio .grid {
	max-width: 100% !important;
}

#front-page-portfolio {
	padding: 20px 10px 10px 20px;
}
```
Hope that helps,
Sage
thepicturebar · Member · Oct 22, 2016 at 8:19 pm
Copy link
Hi,

Thanks! that worked.

could you also please take a look at this:

Also the portfolio thumbnails are
getting jumbled up on the mobile site. How do I fix that?
innisfreehomestead · Member · Oct 22, 2016 at 8:44 pm
Copy link
Hello there,

Glad to hear that worked!

Regarding the images getting jumbled on mobile, it looks like you have these two rules already in your custom CSS:
```
@media only screen and (min-width: 1025px) {
#front-page-portfolio .four {
	width: 16.6%;
}
}
#front-page-portfolio .four {
	width: 16%;
}
```
Those override the theme defaults which make the images collapse properly, removing them should fix that.

As for your other task, if it isn’t related to the front page portfolio items, would you mind opening it up in a new thread?

Thanks,
Sage
thepicturebar · Member · Oct 22, 2016 at 8:55 pm
Copy link
Hello,

It all looks perfect now. Thanks again.
innisfreehomestead · Member · Oct 22, 2016 at 10:44 pm
Copy link
Huzzah! No worries :)

Sage

No items found.