Jump to content

Archived

This topic is now archived and is closed to further replies.

glennyboy

Stop Sections Overlapping

Recommended Posts

glennyboy    9
glennyboy
 

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy
 

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

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy
 

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

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
glennyboy    9
glennyboy
 

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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%.
 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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

 

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • yemoonyah
      By yemoonyah+
      Hi,
      I tried to make a simple change on my opt-in page today by reordering two sections.
      Now they won't save and whatever I do, the same 2 section will be stuck to the top.
      This is a huge problem since it is my opt-in page!
      http://yemoonyah.com/quiz
      (I'm on the latest WP & PL version)
      Thanks.
       
    • Anthony King
      By Anthony King+
      I have to say that I like the Layout and the Template based sections. Some of them are really impressive.
      One of the things that I would like to request though is the possibility of being able to dynamically rearrange the layout.
      An example of what I am talking about is take the Agency Section. It's current layout starts with the
      Splash Module then the Portfolio Module then the Service Module and so on and so forth.
      What would be great is if we were able to move these modules around. I.e have the Service Module first
      then maybe the Splash, and then the portfolio.
       
    • nandorj78
      By nandorj78+
      This discussion has appeared today on the Facebook User Group and we decided to have a vote to know what the users judge more important.
      Let me know which questions you want me to add to the poll.
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
×