• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 21.07.20, 10:43
  • Opened by: gilles Klein
  • Closed by: Fred
  • Closed on: 21.08.20, 21:01
  • Reason: Closed
  • Comment: Glad to help!

Ticket #18678 - single image inline on a column with

I’m building a site with alysium and page builder.

There are 3 columns. On the 2nd, I would like to have 9 images side by side (inline). But it’s impossible. The widget “simple image” below each other.
I overwrite css.

- i added a new class in the simple image widget= “inling” - and i created these css

  1. .inline {float:left !important; margin-right:20px;margin-top:0;}
  2. inline:first-child {float:left !important; margin-right:20px;margin-top:0;}

It’s ok for the flow, but there is a marge on the top i can’t modify
(see attache file)

How car i do ?

Can you help me

Attachments:

screenshot-coincoin-new.doudo... (583.5 KiB)

Comments

Fred 21 Jul 2020, 11:28

Hi, gilles Klein.
Could you please give me a link to a page where I can see the issue?

gilles Klein 21 Jul 2020, 17:46

Yes : http://coincoin-new.doudouetcompagnie.pro/

You can see to my profil for the access on the bo.

Thank you to take care to my Back Office

gilles Klein 22 Jul 2020, 09:25

:) I wanted to said “thank to take care to my issue”.

Fred 22 Jul 2020, 10:23

Hi.
I don’t recommend to use “floats”, that’s outdated approach. Please try the following

.parentElement {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

where parent element is an element what contains items you want to align - https://take.ms/4cV7S

gilles Klein 22 Jul 2020, 12:19

:) I wanted to said “thank to take care to my issue”.

Fred 22 Jul 2020, 12:35

you are welcome

gilles Klein 22 Jul 2020, 14:24

I didn’t manage to add your code in the right place. Where can I put it ?

gilles Klein 22 Jul 2020, 17:31

Hi,

I find that :

.colonnecentrale { 

display: inline-grid;
grid-template-columns: repeat(3, 1fr);

}

.widgets-column > .pk-widget {margin-top: 0;margin-bottom: 0px;margin-right:1em;border:blue 1px solid;padding:0}

I had to overwrite pagebuider.css because the first image is upper than the other.

Can you suggest something better ? :)

gilles Klein 22 Jul 2020, 18:15

Sorry But i have anothe issue with this homepage.

In the third column, I’ld like to pu the images inline to and not upstairs one the other :

1 1 1
1 1 1

and not

1
1
1
1
1
1
1

How can i do ?

Fred 23 Jul 2020, 10:25

try to change this option https://monosnap.com/file/5C7ADF1CRMY8OiSx0qbF9r0uXgiD0y