-
AuthorPosts
-
October 26, 2020 at 7:18 pm #1255811
Having a little trouble with the grid systems for things like portfolio items and blog posts.
A few things:
– When using the masonry grid is there no way to add spacing between blocks?
(looking for something more like the blog posts setup where there is a photo and description below it– With the blog posts grid, when it is resized to a smaller screen and becomes stacked the spacing is fa too close. How do I adjust that?
Looking for it to look like this (services industries grid section)
https://www.srmcllc.com/October 28, 2020 at 8:47 am #1256287With the normal blog functionality, you can specify a page to include the blog. This is done under Enfold : Theme Options.
Then you can choose between different blog themes – Enfold : Blog Layout.
There are three predefined styles and some layouts.
If you choose Gridlayout the whole thing looks like this: https://webers-testseite.de/pureinstall/beitrags-blogseite/
there are ways to have more than 3 Columns on the Grid-Layout even here or-you can also use the Blog-Alb element or the Gallery or Masonry elements to create different layouts without setting the page under Theme-Options.
October 28, 2020 at 6:27 pm #1256431Yes, that’s only for blog and my point exactly. I want portfolio items to display just like blog items can, but there are no settings for this?
October 28, 2020 at 7:34 pm #1256452Hi mbesh,
https://share.getcloudapp.com/9ZuByB1k You can actually show portfolio entries in the blog posts grid using the Blog Posts element.
Best regards,
VictoriaOctober 28, 2020 at 7:58 pm #1256459Will look into this, thank you. Never thought to build this into you theme builder? If you can do it with blog posts why not just apply the same code to portfolio items?
October 28, 2020 at 8:50 pm #1256486Hi!
I’m not sure what you mean by this
“Never thought to build this into your theme builder? If you can do it with blog posts why not just apply the same code to portfolio items?”
Can you please explain a bit more?
Cheers!
VictoriaOctober 29, 2020 at 4:46 pm #1256804Sorry I was confused I thought you wanted me to use CloudApp for the solution didnt realize you were just using cloudapp as a server haha
- This reply was modified 4 years ago by mbesh.
October 29, 2020 at 5:08 pm #1256815Last thing would be about the buttons. Unlike the blog posts layout I don’t see a “plus link” addition so there is a button below them. Is this not coded in?
November 2, 2020 at 8:05 pm #1257683Hi mbesh,
Could you please attach some screenshots of the issue?
Best regards,
VictoriaNovember 6, 2020 at 6:23 pm #1258931To explain it more simply, when using the blog posts section, it adds a “read more” link. When using the blog posts section but setting it to portfolio items it doesn’t give that option.
In either case, I don’t want a link I want a button. There is no option for a button?
You can see exactly what I’m talking about on the homepage I’m building (link in private content)The portfolio items at the top don’t have a button or read more ink. Scroll down and see the “news & updates” section which has the “read more link” for each item. That’s the example.
November 6, 2020 at 7:15 pm #1258946Hi mbesh,
https://share.getcloudapp.com/geuqeyp0 Did you choose the option to show the read more link?
Best regards,
VictoriaNovember 13, 2020 at 12:54 am #1260235Yes, it shows a link, which is ugly and outdated. Why can’t it be a button? That’s what I’m asking. Since it is a built in grid I can;t add my own buttons externally to the design it won’t format properly.
November 14, 2020 at 12:04 am #1260407Hi mbesh,
We can style it as a button.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top .read-more-link .more-link { width: 140px; height: 40px; text-align: center; line-height: 38px; background-color: #469cd9; color: #ffffff; border-color: #247ab7; border-radius: 3px; }
If you need further assistance please let us know.
Best regards,
VictoriaNovember 16, 2020 at 9:22 pm #1260789This worked thank you!
November 16, 2020 at 10:16 pm #1260796Hi mbesh!
Glad we could help :)
If you need further assistance please let us know.
Regards,
VictoriaNovember 24, 2020 at 6:01 pm #1262755Sadly I’m not sure if it’s this new code or what but it has messed up the spacing with the button on the homepage.
If you check the home page and scroll down to news and updates, you’ll see the spacing is broken. Is this the button? Or could it be the other code you all gave me when I mentioned the portfolio and blog items were not spaced correctly on mobile…You can also see the sizing issue at the second link provided when on mobile…
https://kriesi.at/support/topic/blog-posts-mobile-spacing-is-fa-too-close/
December 6, 2020 at 3:45 pm #1265277Hi,
Sorry for the very late reply and thanks for the links. I see in your “News & Updates” section on mobile, that the second post “Five Ways..” doesn’t have the bottom margin due to this css:.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even { margin: 0; clear: both; }
But I’m not sure if this is a custom rule or not, but this is also affecting the “Training” post on your /services/ page.
If this is custom please try removing it, otherwise you can try this css in the WordPress > Customize > Additional CSS field, as it has the highest priority:@media only screen and (max-width: 767px) { .responsive #top #wrap_all #main .avia-content-slider-odd > .avia-content-slider-inner > .slide-entry-wrap > .slide-entry.slide-parity-even { margin: 0 0 20px 0 !important; } }
In my test this solves the issue, please check that this doesn’t cause other issues, and clear your browser cache.
Best regards,
MikeDecember 7, 2020 at 5:45 pm #1265533SO this is what you all told me to add along the way as I have had other problems. Is any of this messing it up (before I add your new code)
#top .container_wrap {
border: none;
}.postid-3727 #av-layout-grid-1 .iconbox_content {
background: #444;
}@media only screen and (max-width: 767px){
.avia-builder-el-18 article{
margin:30px 0px!important;
}.avia-builder-el-33 article{
margin:30px 0px!important;
}}#top .read-more-link .more-link {
width: 140px;
height: 40px;
text-align: center;
line-height: 38px;
background-color: #469cd9;
color: #ffffff;
border-color: #247ab7;
border-radius: 3px;
}h3.slide-entry-title.entry-title a{
font-size:30px!important;
}December 8, 2020 at 2:06 pm #1265751Hi,
Thank you for the feedback, you could try removing this css:@media only screen and (max-width: 767px){ .avia-builder-el-18 article{ margin:30px 0px!important; } .avia-builder-el-33 article{ margin:30px 0px!important; }}
and see if that helps. The issue with the above css is that it is too general, avia-builder-el-18 could occur on any page or post, the same with article.
I recommend re-writing this rule to be specific, try adding the page-id to the rule as a minimum.Best regards,
MikeDecember 17, 2020 at 6:03 pm #1268172Sadly this did not solve the problem. Is there something wrong with your code maybe? Could you take a look please? Provided a login privately.
December 20, 2020 at 1:46 am #1268699Hi,
Sorry for the late reply and thanks for the login, I added the css solution posted above in your Quick CSS and it seems to correct the bottom margin of the middle article on mobile, please see the screenshot in the Private Content area.@media only screen and (max-width: 767px) { .responsive #top #wrap_all #main .avia-content-slider-odd > .avia-content-slider-inner > .slide-entry-wrap > .slide-entry.slide-parity-even { margin: 0 0 20px 0 !important; } }
As I understand you tried this and didn’t see this result? Perhaps try clearing your browser cache and check again.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.