Docs

[mrboats]

I’m setting up a 4 column layout. I would prefer that the responsive behavior of the 4 columns to be so that the columns would first go to two columns wide and then only to 1 column. I’m using VC.

I tried to get this effect with a content band with two columns and then putting content bands with 2 columns inside those content band columns but the layout behaves exactly the same way as if I just have a 4 column content band. So is there some simple way to get the 4 -> 2 -> 1 behavior?

Also I picked up the instruction on the site to put button at the bottom of the columns with something like:

.page-id-1499 .x-column {
    position: relative;
}

.page-id-1499 .x-column .x-btn {
    position: absolute;
    left: 10%;
    bottom: 30px;
}

This works almost perfectly in 4 column mode, however I have not found a way in this case to center the button and also when the columns go into single column format on mobile, the button behavior is not good (see attaced screenshot). Also wondering if this can be done with in-page styling or is this only possible with the customizer (which basically is fine but is a bit cumbersome compared to doing per-page styling in inline code).

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Also clarify a bit that what you are trying to achieve right now as you have already solved part of the issue.

Once you have provided us with your URL, we will be happy to assist you with everything.

[mrboats]

This reply has been marked as private.

[Christopher]

Hi there,

Please try this code :

@media (max-width: 979px) and (min-width:767px){
.x-colophon .x-column.x-md {
    float: left;
    width: 48%;
    margin-right: 2%;
}
}

In regards with buttons alignment, please provide us with URL of page in question.

Hope it helps.

[mrboats]

Hi, the CSS did not work for me at least, see attached image. When I reduced the viewport just a bit, the columns went from 4 -> 1 so did not get 2 columns as an intermedia step.

The buttons are on the same page: http://dokk.fi/dokk-vaatimukset/ I re-enabled the “absolute” setting at the beginning of this post.

[Jade]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[mrboats]

This reply has been marked as private.

[Paul R]

Hi,

Upon checking, I didn’t see the code getting added in custom > css

I tried adding it and it seems to be working.

http://screencast.com/t/xNBTRYgDUi

[mrboats]

LOL, you actually solved an other problem than the one I was asking about. The solution you provided actually worked quite nicely on the footer. When I tested your solution, I didn’t even notice the footer as my question was not about it, it was about the content columns above the footer. 😉

But thank you, you are right, the footer had a responsiveness issue and that is now mostly solved, for some reason one footer widget does not float left, but other than that the footer improved nicely.

Now could I apply the same type of solution to the upper (content) columns as well? Note: the translation is only partially done so the content columns are only visible when you set the language to Finnish.

[mrboats]

Ok getting there. Now that I understood what you meant, this more or less does what I want:

.x-content-band.marginless-columns .x-container .x-column[class*="x-"] {
    float: left;
    width: 48%;
    margin-right: 2%;
}

Found the reason for why the footer did not float left, that was a widget with a fixed height that was a bit too low. Only remaining issue is that the columns still at some widths do not float left as the columns for some reason are not the same length?

Still looking for a way to bottom-align and center the button in a way that also works on mobiles/narrow devices.

[Paul R]

Hi,

Please provide us the exact url of the page where we can see the issue.

Thanks

[mrboats]

The page is still this one: http://dokk.fi/dokk-vaatimukset/
If for some reason you get redirected to the English version (you should not), the just select the Finnish version from the top menu bar (the maps).

[Rue Nel]

Hello There,

Please find and replace this custom css code:

.page-id-1499 .x-column .x-btn {
    position: absolute;
    left: 10%;
    bottom: 30px;
}

You must replace it with this code instead:

@meida(min-width: 980px){
  .page-id-1499 .x-column .x-btn {
    position: absolute;
    left: 10%;
    bottom: 30px;
  }
}

Please let us know if this works out for you.

[mrboats]

Sorry, but does not seem to work, see result in screenshot

So still looking for a solution that would do all these things:
– aligns buttons at the bottom of the columns also when resposive (works when the layout is 4 columns but not properly for narrow displays)
– centers the buttons on columns (does not work for any media size together with bottom alignment)
– not overlay buttons on top of column text for small media (see attached screenshot)
– actually to get it to work properly, I guess the column lengths should also match, now they do that only for the 4-column mode.

[Lely]

Hi There,

Please update this:

.page-id-1499 .x-column .x-btn {
    position: absolute;
    left: 10%;
    bottom: 30px;
}

To this

@media (min-width:1101px) {
.page-id-1499 .x-column .x-btn {
     position: absolute; 
     left: 10%; /*Adjust this to center the button*/
     bottom: 30px; 
}
}
@media (max-width:1100px) {
.page-id-1499 .x-column .x-btn {
    margin-bottom: 10px !important;
}
}

Since the site is responsive, we cannot control the height of the columns on smaller screen when it switch to two columns because the text will adjust depending on the screen width. What the CSS above will do is just implement the button positioning only if it’s on 4 columns state. This absolute position will cause the button to overlap on top of the text on smaller screen.

Hope this helps.

[Author]

Posts