Two quick css questions

[Pbalazs89]

1. I’m a bit new to flexbox and I have trouble aligning my items in the middle.
   http://www.padthai.decorolux.com/egyetem-ter/

On this page, the button is not in the middle, and I was only able to slightly align it by margin-left, not the best course of action. Is there an easier way?

Issue 2:

http://www.padthai.decorolux.com/

On the homepage, I have this fancy animation for my header: https://www.dropbox.com/s/884h6bvqymsktcq/Screenshot%202018-05-22%2015.43.15.png?dl=0

Near the bottom of the screen there’s a EG element which has the same circular border between the two items. However, the issue is that while it renders great in Chrome, it does not in Safari.

I was able to fix this issue by using: border-image-source in the header navigation, but if I use the same code for EG, it doesn’t work.

Here’s the code:

.eg-restaurants-element-2 {
  
  
    width: 100%;
    height: 0;
    border-style:dotted;
    border-color: #c84427;
    border-image-source: url('http://www.padthai.decorolux.com/wp-content/uploads/2018/05/dotswhite.png');
    border-image-slice: 33% 33%;
    border-image-repeat: round;
    border-width: 8px;
    border-top: none;

}

Any input is appreciated. Thanks!

[Alaa]

Hi @Pbalazs89

Regarding the first issue, if you mean this button:

Then I can see it’s already centered with this code:

.gomb {
    margin: 0 auto;
    display: block; 
}

Setting the margin to 0 auto is a valid way to center elements.

For the second issue, this how I can see this part of your page in Safari:

Screenshot

It’s looking the same as in Chrome, so I’m not sure where is the problem here exactly?

Thanks.

[Pbalazs89]

Hi again,

1. That works great, I don’t know why I wasn’t able to do that yesterday. However I noticed something that might have slipped my eye yesterday: https://www.dropbox.com/s/nwwfqdl60c2xhmj/Screenshot%202018-05-23%2011.09.28.png?dl=0

There’s a margin-right: 4%; setting going on in the CSS. I can’t find where it is set in Cornerstone. Is this something that naturally added in the case of three columns layouts, or something I’m missing?

2. The issue is that on Chrome, they form little circles (correct)
   https://www.dropbox.com/s/karmb4xbtjizt8q/Screenshot%202018-05-23%2011.10.51.png?dl=0

On safari, they form small squares:

I would like them to look like small circles regardless of the browser.

[basanta]

Hi There,

Thanks again for asking!

1. The 4% margin is a default margin for the column to maintain the gap. To remove it you can use margin less column in the content editor.
   
2. The border property in the CSS is a default look for safari and chrome browser. I have tested the CSS in the different browser and the result is different.
   
   There is nothing to do with the theme or the CSS. To maintain similar look in all browser you have to use a dotted image instead of a css border .

Hope this helps!