How to prevent columns from moving on top of each other

Support
#1

Hi, I’m using the cornerstone editor to edit a page. I created a row with 4 columns and when I reduce the size of the browser screen to a certain point the columns move under or on top of each other instead of staying next to each other, as columns should. How can I prevent that? I even tried it with empty columns because I thought it was the content, but they moved anyway.

Also, how can i move them closer to each other even when the screen is big? As it is now, the bigger the screen is, the further they move away from each other. I dont want them to expand when the screen gets bigger. I tried max width but it didnt do anything.

Another thing is that I don’t know how to set the background image to a certain height. When I reduce the browser size the image takes up way too much space of the screen at some point. How can I fix that?

Here is an example: https://soundtrackz.de/filme/prinzessin-mononoke

Thanks in advance!

Dennis

#2

Hi Dennis,

Yes that is the default settings for columns. To prevent that, try adding width reset float value on the column inline field. See this: https://screencast-o-matic.com/watch/cblOf82RiM
The following inline CSS will override the theme CSS set for columns on smaller screen:

float:left; width: 22%;

Maximum width should be added on the container of the columns.

Do you mean set background image to certain browser width and not height? Please clarify.
We can use media queries to set or adjust background per screen size. See this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this helps.

#3

Hi Lely,

thank you very much. That was tremendously helpful. I hadn’t seen the customize button before.

About the background image. I figured out that its not the background image, but the section height that I want to set to a minimum value. But simply using min-height in inline CSS doesn’t work well. Is there another option? Especially for mobile I want to keep the height of the section with the background image higher.

Another thing that I can’t figure out is how to use the responsive text option. When I create a responsive text and write the selector name in the Class field of one of the text containers, it doesn’t get smaller even if I set the minimum size to 1px.

And how can I have the text in a column at the bottom instead of the top. Is there something like a float bottom command? I couldn’t find an option to do that. If you go to the same website that I posted above you can see that the headline is at the top of the column. I would like to have it at the bottom and align with the bottom corner of the image on the left. I tried to use top-margin but that doesn’t work well.

Thanks in advance!
Dennis

#4

Actually, there is one more thing. Is it possible to make the top navigation menu responsive? It is to big on mobile. That is probably because of the logo, but is it also possible to make the logo responsive?

THanks in advance.

#5

Hello There,

Thanks for writing in!

1.) Please insert an inline css in the row container min-height: {123}px change {123} to a decent height or maybe min-height: 100vh if you want to have the image as high as your browser height.

2.) Please understand how the background images works. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

3.) The responsive text option will change the font size by utilizing the minimum and maximum font size settings. Please reduce your maximum font size and check the page.

4.) To position the text at the bottom of the column, please remove the float: left; in your inline css and replace it with vertical-align: column; and add this custom css as well

@media(max-width:767px) {
  .x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }
 
  .x-section .x-container.marginless-columns .x-column {
    display: table-cell !important;
    margin-right: 0;
    float: none;
    vertical-align: top;
  }
}

5.) To make the logo responsive, please update the code in #4 and use this instead:

@media(max-width:767px) {
  .x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }
 
  .x-section .x-container.marginless-columns .x-column {
    display: table-cell !important;
    margin-right: 0;
    float: none;
    vertical-align: top;
  }

  .x-brand img {
    width: 130px;
  }
}

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

#6

Hi RueNel,

thank you for your message.

1.) The min-height: 123px worked, but I had to write it without the brackets.

3.) Thanks, now it works. I also used the typography option and it works the way I want now.

4.) I’m not sure if I made a mistake here, but I did exactly as you said and it doesn’t work. I kept the changes, so you can check the result on the website. https://soundtrackz.de/filme/prinzessin-mononoke
Did I have to write the CSS code in the global CSS or in just for that page?

  1. This worked as well thanks. But the top bar itself is not responsive. I tried using auto and 100% in the option field Navbar Top Height, but then the logo is overlapping. Before I had a fixed value of 60px.

I also have a way bigger issue now. I already opened a new post but since its urgent and it happened in the middle of writing this i want to add it here too. When I wanted to load the page in cornerstone to make changes it only showed me an empty page. That had happened before and when I reloaded the page it showed the content again. This time i mistakenly clicked save before reloading the page and now it is still empty even after reloading. Is there any way to get the content back? I’ve been working on it for a long time now to get every little bit perfect. Now its all gone. Is there a way to load the old content? Does the theme create backups or something like this?

#7

Hello There,

Did you switched between editors like accidentally edited the page outside in Cornerstone? Would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#8

Regarding the deleted content I replied to the other post.

1.) I still need to know how to align the title at the bottom of the container. I tried the CSS code and it didn’t work.

for reference: https://soundtrackz.de/filme/the-shape-of-water

2.) I made the logo in the topbar navigation bar responsive thanks to your help. Now the problem is that the topbar itself is not responsive. I set the Navbar Top Height to 44px now, but when i scroll down and back up it cuts off some of the page. I guess because the logo and menu bar are overlapping the navbar height. Is there a way to adjust the logo with the navbar height? Or make the navbar responsive? It only lets me insert a value for px.

3.) I also noticed that the navigation bar does not stick to the top of the screen on mobile. On desktop it scrolls with the page and is always visible but on mobile it doesnt.

That’s all for now. Thank you very much in advance.

Dennis

#9

Hi Dennis,

  1. Try to add a gap element on top of your title.

Please also note that you can add multiple gaps with different sizes and different visibility settings.

That way you can have big gaps in desktop and small gaps in mobile.

  1. You can add this in Theme Options > CSS 
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 53px;
}
  1. To make it fixed in mobile, you can add this in Theme Options > CSS 

@media (max-width: 979px) {
.x-navbar-fixed-top {
    position: fixed;
}
}

Hope that helps.

#10

Hi Paul,

thanks for your help.

The gap doesn’t seem like a very elegant solution but it works and it is easy to change.

I still can’t get the header to get smaller at a certain breakpoint and the X Theme does not seem to have an option for it.
At the third breakpoint (I believe its at 979px), I would like to reduce the height of the header. At that point the mobile menu button shows up. I already reduced the size of the logo for that breakpoint, but the header still has the same height as before and is therefore too big. How can I change it’s size?

Also, in one of the demos I saw that the navigation links in the header had a line below them, to highlight them. I don’t see an option for that though. Is it possible to do that?

Lastly, the links in the footer don’t have the same color as the other links, but I can’t find the option to change their color when the mouse hovers over them. Where can I find it?

Thank you very much in advance!

Dennis

#11

Hi Dennis,

To reduce the height of the navbar in 979px screen and below. Please add the following custom CSS to Theme Options > CSS

@media (max-width: 979px) {
	body.x-navbar-fixed-top-active .x-navbar-wrap {
		height: 45px;
	}
	.x-navbar-inner {
		min-height: 45px;
	}
}

That line is default on the standard menu, it’s not showing on your site because you have this following css block preventing it.

.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
  box-shadow: none;
}

Remove that block and the line should show up.

Please add this to Theme Options > CSS

/*footer links hover color*/
.x-colophon.bottom .x-nav li a:hover {
	color: rgb(188,0,0);
	opacity: 1;
}

Hope it helps,
Cheers!

#12

that worked perfectly. Thank you very much.

This topic can be closed now!

#13

You are always welcome!

Cheers!

#14

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