19blue

@vauclusebitter

I was able to use your code for my site.
My site's background color is white so i set the background color for #hover-element to match.

#hover-element {
  display: none;
  position: absolute;
  top: 0px;
  background-color: #ffffff;
}
#hover-div:hover #hover-element {
  display:block

Hope this helps!

21 hours ago, tuanphan said:

Do you still need help? Can you add me as a contributor? I will test some new code

@tuanphan It's been solved through constructing the page differently. Again thanks to your help;

Thank you.

@tuanphan thank you! worked perfectly.

Thank you again @tuanphan
 

I tried the .sqs-col-3 but it moves the 4th column down.

This code gives me three vertically/horizontally responsive columns with equal height and width with buttons aligned. Regardless of difference in length of copy. However, it does not work when attempting to have four columns across. Any ideas of how I can make it work for four columns?

Thanks in advance.

[your-data-section-id] .sqs-row {
  display: flex;
  flex-wrap: wrap;
}
[your-data-section-id] .sqs-col-4 {
  background-color: #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 330px;
  flex-direction: column;
  margin: 1%;
  padding: 30px;
}
[your-data-section-id] .button-block {
  margin-top: auto;
}

On 4/24/2021 at 11:04 AM, tuanphan said:

It looks fine here. Did you solve?

The problem occurs when scaling the browser. (images below) 

On 4/24/2021 at 3:31 PM, tuanphan said:

It see it seems fine here?

The tekst was previously aligned to the vertical center of each cirlces. now they have dropped down.

21 hours ago, tuanphan said:

Can you add the code & Don't edit anything?

Didn't seem to do the trick...

On 2/14/2021 at 3:29 AM, tuanphan said:

Add to Design > Custom CSS

/* kontakt icon text side by side */
@media screen and (max-width:767px) {
div#page-section-601c878e78a1067166d81580 .span-12>div:nth-child(n+3) figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
}

 

Hi again @tuanphan

I´ve made some updates to the website and somehow the vertical text/image alignment is off. Would you know how to fix this? It was originally center aligned vertically, and not so far away from the circle.

Thank you.

@tuanphan No, not prior to testing the code.

On 3/31/2021 at 4:17 AM, tuanphan said:

Use new code

/* Equal boxes */
@media screen and (min-width:768px) {
div#block-32cc516860957b8ac645+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#block-32cc516860957b8ac645+.row .span-3 {
    flex: 1;
    background: #fff;
    border: #ff6900 2px solid;
    border-radius: 10px;
    padding: 5px !important;
    margin: 20px;
    text-align: center;
}
div#block-32cc516860957b8ac645+.row .span-3 .markdown-block {
    max-width: unset !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
div#block-32cc516860957b8ac645+.row .span-6>.row {
    display: flex;
}
}

Thank you @tuanphan It's not working but thanks for helping.

@tuanphan

Thank you again! The code almost worked.
It's giving me two extremely long boxes and two short stacked ones instead of 4 equal ones. 

On 3/7/2021 at 7:31 AM, tuanphan said:

Hi. Sorry for the delay. Do you still need help?

We can use CSS Flex to solve this

Hi @tuanphan , no worries any help is much appreciated.
Still haven't found a solution.

Hi @tuanphan

Is there any way to ensure equal height on these markdown boxes on this page and have the buttons and various copy sections line up as well?
 

https://www.sentrumosteopati.no/priser-1

Hi,

I'm experiencing the same issue with this site: https://www.mgadv.no/kontakt
Any help would be much appreciated.