• 0

DMS 2 Stop Sections Overlapping


Question

Posted · Report post

 

Hi

 

How can I stop sections automatically overlapping? I've tried various CSS methods but without success they still overlap when the screen resizes. For a particular column I don't want sections within to overlap at all.

 

Thanks

 

Glennyboy

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Could you provide a link to your site so we can see this for ourselves?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

is there any ay I can email/pm this to you?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please see my profile URL and add '/tril/' to get the development site. The top right blue bar has sections within that are overlapping on resize. Same for the Navi below. I don't want wrapping on resize on these elements.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Your site link does not work - please send any details to hello @ PageLines dot com along with a link to this forum topic and we can try to help with this. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

That link should work fine.. I'll email also

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have mailed for this and my other posts in email with subject 'Glennyboy Forum Posts Info'

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

Any update on this please. Need an urgent fix to prevent overlapping.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As far as I can tell, this isn't a DMS issue, this is an issue caused by your custom CSS. This isn't something we can provide support for.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm pretty sure this is DMS. All DMS sections wrap and I don't want them to. 

 

Each of my components here is nested DMS section. This is DMS specific. Take a closer look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not entirely sure you mean by wrap. If you mean they reduce in size and then stack, then what do you want them to do?

 

If they do not stack they you will either have a non-responsive website or you will need to reduce all the text in those sections ?

 

However, I am not sure what it is you want to achieve ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

This is a fixed info section. For reasons of 'design' I/we don't want it to wrap as the wrap causes a spill over the main wrapper (which is a DMS column). The responsive breakpoints are triggered at @resPhoneLandscape (and will have some triggers on @resPortraitTablet, but on the whole I don't want any wrapping on the top bar until I use a media query to do so. Right now nothing stops the rows spilling out of their containers.

 

Thanks

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well if you add multiple sections to a area, they're going to stack, this is just how DMS works and most responsive websites, blocks of content will stack as its easier to read. Similar in how a sidebar will stack at the top of your content.

 

If you do not want to have this stacking you will either need to use media queries or add all your code into one block and then use custom CSS to prevent the stacking. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My original question was what CSS will stop them stacking?... 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

We do not provide customization support which is what this is, you will most likely need to use media queries and stop those sections from not floating left, displaying as a blocks and give then a specific width instead of it being auto or 100%.
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

That's pretty unhelpful. Pagelines created the sections and should be able to advise how to stop a particular behaviour. What if you don't want 'responsive' features in a web site? That is pretty standard stuff.

 

I'm getting really fed up with the inflexibility of Pagelines... 

 

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Most people view websites on mobile devices, hence why all the popular frameworks and themes are mobile ready or mobile first.

 

Not sure why you say PageLines is not flexible, your issue is coming from the fact that you're trying to use multiple sections and prevent them from doing something standard in responsive design i.e. stacking on top of one another. If you do not like this functionality, you will need to override with CSS.

 

An example of this code would be something like this (untested):

 

https://gist.github.com/anonymous/4d2faed752b059ded4d0
 
This would be for any sections you have that use 4/12 for their width and will effect all span4 columns.
 
However, you can create your own custom classes and media queries to make this simple. All you would need to do is this:
 
https://gist.github.com/anonymous/d1b1d3614518ba462554
 
As you can see there are multiple LESS variables, each assigned a width which represents (roughly) the width of each column i.e. 6/12 = 2 columns which would be span6.
 
So you will want to use the LESS I have provided above and also create a snippet for each span, in the example code above I have provided you with span1, you will need to copy/paste this code for each span.
 
Then go to your sections and add the following class names to your custom styling classes field.
 
non-stack no-spanX replace X with the width of your section.
 
[span1]  = 1/12
[span2]  = 1/6
[span3]  = 1/4
[span4]  = 1/3
[span5]  = 5/12
[span6]  = 1/2
[span7]  = 7/12
[span8]  = 2/3
[span9]  = 3/4
[span10] = 5/6
[span11] = 11/12
[span12] = 1/1  
 
You're also free to use a child theme and add any less stylesheet and override all styles yourself.
 
Here is a before and after:
 
Before using non-stack no-span4 classes - https://cloudup.com/cNJpfwARdrh
After using non-stack no-span4 classes - https://cloudup.com/cK9Etp4zkB8

 

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now