Content not aligned on mobile devices

Support
#21

Hello There,

Thanks for sharing the screenshot. You may be able to do this layout in Cornerstone. You can follow these steps:
1.) Please section your section and add the background image.
2.) Please create a 1 column row which will hold the headline element.
3.) Create another row and this time, select two columns. Please enable marginless columns in the row settings.
4.) For each columns, please add some padding to have some spaces around and between your columns. And please do not forget to set the alignment to center.
5.) Add your desired elements for each respective columns.

Hope this helps.

#22

Thanks RueNel

#23

You’re welcome!
We’re glad we were able to help you out.

#24

Hi X Pros, i wonder where i can customize this button to style “real” ?
I also need to remove a grey bar on top bar content, the bar is only visible on mobile devices!?

#25

Hello There,

Thanks for updating this thread.

1.) Please make use of the v2 button element. You can easily style it in the v2 button settings.

2.) Please update the topbar content and use this:

<span style="float:left;padding-top: 10px;display:inline-block;"><img style="margin: 5px 10px" src="http://criarvalor.pt/novo/wp-content/uploads/2017/11/Contact-Icon.png" alt="Phone" style="width:30px;height:30px;"><a href="tel:+351289432293"><u>+ 351 289 43 22 93</u></a><br><img style="margin: 5px 10px" src="http://criarvalor.pt/novo/wp-content/uploads/2017/11/Email-Icon.png" alt="Email" style="width:30px;height:30px;"><a href="mailto:info@criarvalor.com"><u>info@criarvalor.pt</u></a></span>
<span style="float:right;padding-top: 10px;display:inline-block;"><a href="http://www.criarvalor.pt/novo/en/">EN</a> | <a href="http://www.criarvalor.pt/novo/pt/">PT</a></span>

<p> tag is no longer needed. And then please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-topbar .p-info {
  background-color: white;
}

Hope this helps. Please let us know how it goes.

#26

Hi RueNel, thanks for the reply, but unfortunately none is working.
1.) I removed the

tag and the text is not floating left and right.
2.) I add the css code in Theme Options > Global Css and the grey bar is still there.

#27

Hi,

I went ahead and fix it by adding this custom css


.x-topbar .p-info {
  background-color: white;
  display:inline-block;
  width:100%;
}

@media (max-width: 767px){
.x-topbar .p-info {
    padding:0;
    background:transparent;
}
}

I came up with the code using chrome inspect element.

Kindly check in your end.

Thanks

1 Like
#28

Thank you paul.r, you´ve been very helpful.

#29

Glad that we could be of a help. For future questions, we suggest that you open up a separate thread so that we can focus on the case.

Having too many of back and forth in one thread will make our job hard to trace the actual request due to the cluttered information.

Thank you for your understanding.

#30

OK christopher, i understand. There is one point of the thread with no answer: “i wonder where i can customize this button to style “real” ?”
Should i open a new one?

#31

Kindly open up a separate thread and give us the detailed information including the credentials in a Secure Note and screenshots to follow up. Thank you for your understanding.

#32

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.