Hello,
I am about finishing a website for an NPO and I just found out, that it is quite messed up, when reducing the size of the page to the size of mobile device.
How can I adopt the site for mobile, so it will also look good there?
I made screenshots of some examples. I will describe it in the next answer, which I will mark private (where I also will provide login credentials)
Thank you!
WTF?! “New users” (I got various X Theme licences since years) can add just one image per reply?!
Ok, so this are going to be a lot of replys…
Ok, it is working differently in the new forum.
EXAMPLE 1
I have here 2 rows. In the first row there is the icon, the headline and the text of each column, in the second row there is the button. On big screen in looks perfectly fine, just as I want it:
EXAMPLE 1 (continuation)
But on mobile device, it looks very odd. All 4 buttons are in a row. I understand this happens, because I have the buttons in a seperate row, but otherwise (so if I would add the buttons also to the first line), the buttons wouldn’t line up, because the texts are not equally long. Any suggestions how to solve it?
EXAMPLE 2
Here I have columns as follows: 1/5 + 1/5 + 3/5. Again, on big screen it looks just as I want it to look:
EXAMPLE 2 (continuation)
On small screen, the arrow are on the right side, instead of the left. How can I move them to the left side?
EXAMPLE 3
Here I have 1/3 + 2/3 columns. ON big screen it is fine
EXAMPLE 3 (continuation)
On small screen, the icon touches the headline. How can I change that?
Hi There,
Example 1
You should add the buttons not in a separate row, but in the same row as your icon + text. just below it. I also reccomend adding a classic gap element below the buttons.
Example 2
Please add the following code to Cornerstone CSS
@media(max-width: 769px) {
.el251.x-column {
text-align: left !important;
}}
Example 3
You can add a gap below the icon. The classic gap element offers the option to hide based on screen width, so you can hide it for desktop and laptop and show it just on tablets and mobile.
Hope it helps
@Joao
Thank you for you quick reply.
As for Example 1, as I wrote I know that the problem is, that I use 2 different rows. But I also can’t use just one row, because then the buttons are not aligned on one line, as the text of the 4 sectors is not the same length.
Example 2: I added the code you told me, unfortunately it didn’t solve my problem. The arrows are still on the right side.
Example 3: thank you, this solved my problem.
Cheers!
Thanks for clarifying.
Ex 1 - Ok, so you will follow my reccomendations, but you also will do that: You will add to the Inline CSS of each text element which is located on the customize tab of the element the following CSS >
min-height: 150px;
Ex 2 - Please add the following class to each column where you have the arrow icon placed: arrow-column
You will find the class box on the customize tab of each column
Also use the following code instead
@media(max-width: 769px) {
.arrow-column.x-column {
text-align: left !important;
}}
Hope it helps
@Joao
Thanks again for your quick reply. As for Example 1 I am not able to find the Inline CSS of the Text Element. I looked at the Customize tab, but there is none:
Cheers!
HI There,
Sorry, you are correct.
Please replace your text elements with Classic Text Elements and use the Style box to add the given code.
The Style box is at the bottom of the element.
You can adjust 150px to another value if better suites you.
Thanks
Great, that worked. But now the space between the text and the button is too big in the mobile version. On big screen it is just fine:
Can I reduce it for mobile only?
I found one more problem in the meantime: in the mobile version there is no footer.
I forgot to say: Example 2 is solved thanks to your help. Thank you!
Cheers!
I solved the problem that there was no footer when on mobile view:
Go to the Footer Editor - inspect the Bar - tab Customize - and unselect all views on which you want to have the footer available
Cheers!
Hey There,
We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!
Best Regards.
I wanted to ask one more thing: I would like to have a burger menu in the footer on mobile devices. How can I do that? I made it now like that to have the navigation line, which I made just visible on big screens and the navigation dropdown element, which I made just visible on mobile screens.
But somehow I thought that this was not the right way to do, because I have now 2 navigation elements for the same menu. Is there any other way?
Cheers!
Hi,
That’s totally fine, you have done it the right way.
Thanks
Ok, thank you!
Just a side note: earlier I always waited for appr 1-2 days till I got my problem solved. The new reaction time of this support is just amazing!
Great job guys!
You’re welcome! 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.