Docs

[lukasjan]

Hello,

I was designing my webpage and suddenly without any reason second column in the section 2 got broken. When reso is higher than 1300px width the content of second column moves from its position, and from 650 to 1300px reso it is jus broken.

Is there any mistake in my code which i cannot see?

[lukasjan]

This reply has been marked as private.

[Rupok]

Hi there,

I have checked and I have found you are using lots of custom CSS for this and some of them are unusual like this :

.x-column.x-sm.x-1-4 {
	display: inline;
	width: 100% !important;
	padding-bottom: 90px;
	position: relative;
	min-width: 150px;
}

You can’t set a static width for the column because they are supposed to be responsive based on the screen size. You have some other CSS that’s also causing issue. Unfortunately we can’t help with custom codes much since they are always confusing and you should know best about them.

Thanks!

[lukasjan]

I found my mistakes, thanks..

Maybe you know how could i make buttons to stay in the bottom of columns no matter how many text i would add? It really annoys to alter the paddings everytime I add or remove some text.

with respect

Algirdas

[Friech]

Hi There,

Have you already resolve the button issue? It stays at the bottom now regardless of the column height.

Thanks.

[lukasjan]

Yeah, it does that okay now, but when screen resolution is between 650 and 1300, it doesnt, because it is dependent from text. Any ideas how to fix button’s bottom in the same horizontal line with picture so that the text doesn’t affect button’s position

Thanks!

[Joao]

Hi There,

Please update your code from >

@media only screen and (max-width: 1300px) and (min-width: 650px) {
.x-btn.x-btn-global {
    position: relative;
    margin: 0px 0px 0px -10px;
  }}

To

@media only screen and (max-width: 1300px) and (min-width: 650px) {
.x-btn.x-btn-global {
    position: relative;
    margin: 160px 0px 0px -10px;
  }}

Hope it helps

Joao

[lukasjan]

Hey, that does the trick for first two columns, but that doesn’t fix buttons here, and when I add some text, it pushes buttons down. Is it possible to fix a button in this place of column?

[Rue Nel]

Hello There,

Thanks for updating in! At the moment, the buttons position is dependent on the height of the element prior to the button. If you want to have a fixed position of the button, perhaps you can use this code instead:

@media only screen and (max-width: 1300px) and (min-width: 650px) {
  .x-column.x-sm.x-1-4 {
      position: relative;
  }
  
  .x-column.x-sm.x-1-4 .x-btn.x-btn-global {
    position: absolute;
    bottom: 20px;
    display: inline-block !important;
    max-width: 220px;
    margin-left: 50%;
  }
}

Hope this helps.

[lukasjan]

Hey, you solved it! Thank you, really!
I just can’t understand one thing. After adding absolute position to a button when I narrow browser’s width from 1300px to 650px chrome reacts not very accurately, in a strange gaps.. Is it possible to solve that?

Thanks for your patience

With respect

Algirdas

[Rue Nel]

Hello There,

Thanks for updating in! Could you please send us the screenshot of the gap and also a screenshot of how should it would look like so that we will have an idea of what you have in mind.

Thank you in advance.

[lukasjan]

Hi,

Try to narrow browser from 1300px to 650px and look how buttons are responding in safari and chrome. Its different. I would like that chrome would respond as safari is.

Thank you!

[Rad]

Hi there,

Would you mind providing a video recording? It looks the same on my end, maybe it’s something I just overlooked.

Thanks!

[lukasjan]

Hi

https://vid.me/6ZoD

here it is. 1st safari then chrome :/

[lukasjan]

What do you think?

[Author]

Posts