Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

odd columns on page how?

Featured Lock Resolved Issue
Hi,

I'm building my pages (migrating from existing site). I've set up the grid like 1+10+1 but in the original site the content contains 3 columns centered, each column containing an image with a heading-title above each of them... How can I migrate this page-layout of 3 centred columns...

Thanks in advance.

attachment 1 : grid layout
attachment 2 : front-end of source-site

Attachments (2)

  • Screen Shot 2018-06-22 at 16.25.17.jpg
    Screen Shot 2018-06-22 at 16.25.17.jpg 436.2 KB
  • Screen Shot 2018-06-22 at 16.35.44.jpg
    Screen Shot 2018-06-22 at 16.35.44.jpg 982.7 KB

7 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Please check this screencast
And use the css to get that working.

Here is the code.

.sppb-col-md-10 .sppb-column-addons {
display: flex;
}
.sppb-column-addons .sppb-addon-single-image {
margin-right: 20px;
}


-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please follow the following steps:
1) Take a 4+4+4 grid https://screenshots.firefox.com/kthrQYomwp0NSxUk/null
2) Then use the heading addon https://prnt.sc/jyd8p9
3) Then you can use the image addon https://prnt.sc/jyd8st

And here is the output https://prnt.sc/jyd8hr

-Best Regards

squareweb

More than a month ago #Permalink
Hi,
Thanks for your query. Please follow the following steps:
1) Take a 4+4+4 grid https://screenshots.firefox.com/kthrQYomwp0NSxUk/null
2) Then use the heading addon https://prnt.sc/jyd8p9
3) Then you can use the image addon https://prnt.sc/jyd8st

And here is the output https://prnt.sc/jyd8hr

-Best Regards

squareweb

More than a month ago #Permalink
Hi Sifat,

Thanks for your reply. I send another screenprint to show you what I mean.
When I follow your instructions the images are spread horizontally based on 4 columns but I want them to be spread even in 1+10+1 so the images should be centered in the 10 center columns...

Now the images are overlapping on the left and right side...

See attachment please

Thanks again

Mark

Attachments (2)

  • Screen Shot 2018-06-23 at 16.38.32.jpg
    Screen Shot 2018-06-23 at 16.38.32.jpg 949.8 KB
  • Screen Shot 2018-06-23 at 16.41.17.jpg
    Screen Shot 2018-06-23 at 16.41.17.jpg 359.6 KB

squareweb

More than a month ago #Permalink
Sifat,

Thanks for this solution, this works perfect (:-

Regards

Mark

Sifat - Staff

More than a month ago #Permalink
You are most welcome


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 152
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 85
Toufiq

Toufiq

Total Accepted Answers: 21
Pavel

Pavel

Total Accepted Answers: 3
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289268

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us