Docs

[BradleyB]

Hi,

Forgive me, I am new to using CSS to customize sites. I have some image and text elements inside a div. When I resize the browser, everything gets wacky. The text isn’t adapting correctly. I was hoping you could help me, or point me in the right direction. Everything looks correct when the window is around 1500px. When I stretch the window above that, I would like the content to remain centered in the divs. When I go below that, I would like the content to adapt. Any help would be GREATLY appreciated. Thanks so much!

[BradleyB]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! It looks like you’re using Custom CSS in your Cornerstone’s custom page CSS. Please remove your Custom CSS and check the site again.

This should resolve the issue, let us know how this goes!

[BradleyB]

hi,
Thanks for the reply. The problem is that when I size the browser below 1250px, the text breaks out of the containers. Is there anyway to fix this? I can;
‘t remove the custom CSS, as I need it to keep the styling that I want. Is there anything I can do or change in the CSS to make the text remain within the columns when the window is resized? Again, the html I am using is:

<section class="shadow">
<div class="clinical">CLINICAL</div>
<div class="clinCon">
	<ul>
		<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>1-on-1 Therapy</span><p class="explain">Address root causes of addiction</p></li>
		<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Addiction Education</span><p class="explain">Understand Addiction's inner workings</p></li>
		<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Literary Therapy</span><p class="explain">Identify, process and resolve trauma</p></li>
		<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Process Group</span><p class="explain">Connect with a group of your peers</p></li>
	</ul>
</div>
</section>

and the CSS I am using is:

body {
    background-color:#ecf0f3;
}

.clinical{
  background-color:#eeeeee;
  color:#566471;
  letter-spacing: 0.05em;
  border-top-left-radius:5px;
	border-top-right-radius:5px;
  font-size:25px;
  font-weight:bold;
  text-align:center;
  padding:10px 0 10px 0;
  margin-top:20px!important;
}

.clinCon{
height:auto;
background: rgb(249,255,254); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(249,255,254,1) 0%,      rgba(253,253,253,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(249,255,254,1)  0%,rgba(253,253,253,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+,  Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fffe',   endColorstr='#fdfdfd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient     */
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

}

.shadow{
    -webkit-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
	border-radius:5px;
}

.comp{
  background-color:#eeeeee;
  color:#566471;
  letter-spacing: 0.05em;
  border-top-left-radius:5px;
	border-top-right-radius:5px;
  font-size:28px;
  font-weight:bold;
  text-align:center;
  padding:10px 0 10px 0;
  margin-top:0px!important;
  width:120%;
  position:relative;
  left:-10%;
  z-index: 99!important; 

}

.compCon{
	height: 540px;
  width:120%;
  position:relative;
  padding:70px 0 7px 0!important;
  left:-10%;
  top:-65px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9fffe+0,fdfdfd+100 */
	background: rgb(249,255,254); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(249,255,254,1) 0%, rgba(253,253,253,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fffe', endColorstr='#fdfdfd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
  border-radius:5px;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.2);
}

.opti{
  width:460px;
  position:static;
  top: 14%!important;
  display:block;
  margin:0 auto;

  
}

.clinCon > ul{
list-style-type: none;
position: relative;
font-size: 22px;
letter-spacing: 0.05em;
color: #566471;
}
.clinCon > ul > li {
    height:100px;
    display: block;
    width: 400px;
    margin: 0 auto;
    padding: 24px 0px;
}

.clinCon img{
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left;
    margin-right: 20px;
  	margin-top:3px;
}
.clinCon span{
		display: inline-block;
    line-height: 0;
    padding: 10px 0;
}

.clinCon p{
		font-size: 12px;
    position: relative;
    display: block;
    margin: 0 !important;
  	margin-top:-7px!important;
}

Thanks so much!

[Paul R]

Hi,

To fix it, you can add the code below in Cornerstone > Settings > Custom CSS.

https://www.screencast.com/t/UIPW7GRa

.clinCon > ul > li {
   width:100% !important;
   height:auto !important;
}

Hope that helps.

[BradleyB]

Thank you! That helped a ton!

There are three more issues now, though.

1) The side padding changes depending on the browser size. Is there a way to keep the content of the ul vertically centered in the columns?

2) Is there a way to keep the three columns aligned in the middle?

3) Between 1172px and 768px, strange things start to happen. The titles overlap when they go on to new lines and the icons look bad. Is there a simple way to make the icons stack on top and the text look good between these resolutions?

Thank you SO much! Your help is really appreciated.

[Friech]

Hi There,

#1 It is vertically center and I dont see side paddings on your list. #2 And columns are in the middle. Please clarify.

#3 Please add this on your custom CSS on Customizer.

@media (min-width: 768px) and (max-width: 1172px) {
		.shadow .clinCon > ul {text-align: center;margin-right: 1.655em;}
		.shadow .clinCon img {float: none;margin-right: 0;text-align: center;}
		.shadow .clinCon span {padding: 0;line-height: 1.5;}
}

Note: icons are not showing on our end, as you can see on my screenshot. Check you images source URL.

Thanks.

[BradleyB]

Thanks for your reply!

To clarify:

1) When the browser is sized above 1396px, there is more padding to the right of the lists than the left (please see the first attached picture). I would like it so that no matter the browser size, there is the same amount of padding to the left and right.

2) when the browser is resized, the columns get out of whack, the appear to be aligned towards the top (please see the second attached picture). I would like them center aligned no matter the browser size.

Again, thank you so much! I really appreciate the help. Let me know if you have any questions.

[BradleyB]

Sorry, the second image was too large. It is attached here.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (min-width: 767px) {
#x-section-1 {
   text-align:center;
}
#x-section-1  .x-column.x-1-3 {
	display:inline-block;
        float:none;
        vertical-align:middle;
}
#x-section-1  .x-column.x-1-3:nth-child(2) {
      max-height:540px;
}
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts