PORTFOLIO SNIPPETS ON Single Page

[tripleogfox]

Hi Support,

Very similar enquiry discussed on Previous Discussion “https://www.livemeshthemes.com/support/forums/topic/portfolio-snippets-on-home-page-1/” regarding the layout of the portfolio snippets on Single Page. Is there any way of fitting 5 or 6 columns (5 or 6 snippets) neatly in 1 row and have the ‘snippets’ size themselves to suit?

I used this shortcode “[show_post_snippets post_type=”portfolio” number_of_columns=5 post_count=10 image_size=”small” show_meta=false layout_class=”post-snippets full-width-snippets” display_text=false]” and the images are only showing 3 in a row and slightly aligned to the left on single home page.

[tripleogfox]

I’ve also tried “reply#781” posted by livemesh support team and still won’t work on AppDev theme.

[Raghavendra]

As explained in the post –

https://www.livemeshthemes.com/support/forums/topic/portfolio-snippets-on-home-page-1/

currently by default we support 2,3 and 4 column grids. If you need 5, you will need to modify the theme exactly like the solution posted in the post linked. See sub-post below.

https://www.livemeshthemes.com/support/forums/topic/portfolio-snippets-on-home-page-1/#post-781

Are you saying, you have given it a try and it does not work?

[Raghavendra]

BTW, if you have the child theme loaded, you can just copy over the changed mo_get_column_style() function in

https://www.livemeshthemes.com/support/forums/topic/portfolio-snippets-on-home-page-1/#post-781

to the functions.php of the child theme and then insert the custom CSS there into the style.css file of the child theme.

[tripleogfox]

I have 6 page sections in one single page.
What I was trying to do is make page section’s width wider. So I used this custom css “body.fluid-width-page .segment-content {
padding-left: 20px;
padding-right: 10px;
max-width: 1620px;
margin: 0 auto;
}”

Now, everything is good and got wider page section, but I just wanted to ask you if there are other shortcode that I can use to Only change 1 page section width? instead of that shortcode made change all 6 page section width wider. Maybe add page id? if so, can you please tell me how I do that?

[Raghavendra]

You can just target a single page section by wrapping the whole content within a div with a certain id. By default a page section is full width which means unless you wrap something within a [segment] shortcode, the content occupies the entire browser width. So, instead of starting the page content with [segment] shortcode, you can start with a regular div and then have custom CSS like what you posted above which targets only that div like this

#my-custom-wide-div {
padding-left: 20px;
padding-right: 10px;
max-width: 1620px;
margin: 0 auto;
}

while you leave the .segment-content styling undisturbed.

There is one other alternative too which may be easier. Just use a [segment id=”my-wide-segment”] to wrap the content and then set the custom css to be –

#my-wide-segment .segment-content {
max-width: 1620px; /* Override the default max-width of 1140px */
}

[tripleogfox]

JUst one more to ask you…
I used this shortcode “<div class=”my-custom-div”>
my full wide contents</div>”
without adding any of your custom shorcode that was provided by you and it worked with full wide page just like I wanted. But somehow I can’t controll this little gap between the page.
It’s single page site and I really want to get rid of the gap between the pages when I scroll it down. Can you check the attached file and help to remove the gap line?

[Nexus]

Pls reply as a private message here with the site URL and I can take a look. Thanks!

[tripleogfox]

This reply has been marked as private.

[Nexus]

It is asking me login credentials. Please provide one. Thanks!

[tripleogfox]

This reply has been marked as private.

[Author]

Posts