-
Posts
-
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/With 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.
Yes, 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?
Hi mbesh,
https://share.getcloudapp.com/9ZuByB1k You can actually show portfolio entries in the blog posts grid using the Blog Posts element.
Best regards,
VictoriaWill 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?
Hi!
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!
VictoriaLast 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?
To 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.
Hi mbesh,
https://share.getcloudapp.com/geuqeyp0 Did you choose the option to show the read more link?
Best regards,
VictoriaYes, 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.
Hi 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,
VictoriaHi mbesh!
Glad we could help :)
If you need further assistance please let us know.
Regards,
VictoriaSadly 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/
Hi,
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,
MikeSO 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;
}Hi,
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,
MikeSadly this did not solve the problem. Is there something wrong with your code maybe? Could you take a look please? Provided a login privately.
Hi,
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
- You must be logged in to reply to this topic.