Docs

[pdopchev]

Hi guys,

Been struggling with aligning an image and making a column centered.

1) Trying to keep a “practical” layout [see screenshot 1] at different screen sizes. It’s okay when the image moves above the text but everything else gets messy… [see other screenshots]

This is what I have for the image:

@media (min-width:768px) {
  .kate-king-img {
   float:left;
  }
}

2) How do I center that column in the row?

@media (min-width:481px) {
  	.kate-king {
		max-width:50%;
    margin-left: auto!important;
    margin-right: auto!important;
    }
   }

doesn’t seem to work…

link:http://www.enjoycrestedbutte.com/crestedbuttesnowsports2/bios

Thank you!

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (min-width:481px){
	.kate-king{
		max-width:50%;
		margin-left:auto!important;
		margin-right:auto!important;
		float: none;
	}
}
@media (max-width:1222px){
	.kate-king {text-align: center;}
	.kate-king img {float: none;}
	.kate-king .h-custom-headline {margin-top: 0;text-align: center !important;}

}

Hope it helps, Cheers!

[Rue Nel]

Hello There,

Thanks for writing in!

1] It is best the you make two columns instead. The left columns should have the image and the right column will have the headline, text and the button. You can add the borders in your row settings including the border radius.

2] If you still want your current layout, you may use this code:

@media (min-width:980px) {
  .kate-king-img {
   float:left;
  }
}

@media (max-width:979px) {
  .kate-king {
    padding: 20px !important;
    text-align: center;
    margin-left: auto!important;
    margin-right: auto!important;
  }

  .kate-king .x-text {
      text-align: left;
  }
}

Hope this helps.

[pdopchev]

Thanks for the help, guys! Great advice @Ruel!

However ran into a couple of issues:

1)The set width doesn’t seem to work if screen size is bigger than 1200px [see screenshot 1]

@media (min-width:481px) {
  	#x-section-3 {
		max-width:75%;
    margin-left: auto!important;
    margin-right: auto!important;
    }
   }

2)Is there a way to center the image vertically at screen sizes bigger than 767px? [see screenshot 2]

3)Tried to center the header at screen sizes smaller than 767px but unsuccessfully. The text is centered with:

media (max-width:767px) {
  .kate-king-column {
   text-align:center;
    }
   }

Thank you for your help!

[Christopher]

Hi there,

#1 Please update previous code to :

@media (min-width: 481px){
#x-section-3 .x-container {
    max-width: 800px;
    margin-left: auto!important;
    margin-right: auto!important;
}
}

#2 Please enable ‘Marginless columns’ option from row settings.

#3 Try this code :

media (max-width:767px) {
.kate-king-column .h-custom-headline {
    text-align: center !important;
}
}

Hope it helps.

[pdopchev]

Thank you so much for the css code!

Unfortunately #2 and #3 don’t seem to work. #2 Had them enabled before head.

[Christopher]

Hi there,

#2 Please provide us with login credentials so we can take a closer look.

#3 Sorry, my mistake. The code should be :

@media (max-width:767px) {
.kate-king-column .h-custom-headline {
    text-align: center !important;
}
}

Hope it helps.

[pdopchev]

Thanks for the prompt response!

#3 – Actually, I happened to noticed the lack of the “@” in front of media and put it there before I added the code. It is currently not working.

[pdopchev]

This reply has been marked as private.

[Christopher]

Hi there,

#2 Please add vertical-align: middle; in left column’s style field.

#3 The code is working fine, please see the attachment.

Hope it helps.

[pdopchev]

Great! Thank you for your help! #3 the code is working! No idea why it wasn’t before, maybe it was the browser cache…

[Rupok]

You are welcome!

Yes cache might be an issue. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[pdopchev]

Hi guys,

“Opening” this thread again – having a similar issue about on a different website/page. Trying to align an image vertically (#2 from above). In the previous case adding:

vertical-align: middle;

to the column worked just fine but it doesn’t seem to be working this time: http://www.enjoycrestedbutte.com/9-things-you-must-do-on-your-first-crested-butte-visit (check screen grab)

Any suggestions?

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

@media screen and (min-width: 768px) {
.postid-229 #x-section-12 {
    display: table !important;
    width: 100% !important;
}
.postid-229 #x-section-12 .x-column {
    display: table-cell;
    float: none;
    padding-right: 2% !important;
}
}

Let us know how this goes!

[Author]

Posts