I've got a pretty specific issue I'm running into and the theme developer has gone MIA.
I have linked a screencap of what the issue is and I'll try and describe it as best as possible here, too. If more info is needed, just let me know and I'll provide as much as possible.
Screencap: http://tinypic.com/r/53le1l/8
I'm using a pretty modified version of this theme, but nothing that should have an affect on the functionality of the theme:
http://www.themes.red-sun-design.com/?theme=lemonchili
As you can see - the homepage is designed to display widgets, each in their own container, as opposed to a custom page layout (we're ignoring the top slider as that isn't an issue). The widgets that are included in the theme work just fine and size correctly with whatever content is displayed.
homepage layer structure is (from back to front): background image --> sidebar/menu & page background--> page content (slider and widgets)
The issue is, with third-party widgets/plugins and pretty much any interactive content, those containers do not expand correctly and end up leaving the majority of the content not visible.
I'm using the plugin EventON (www.myeventon.com) and if a month has 2 events, as shown in the screencap, it displays fine. (NOTE: when an event is clicked/selected a lightbox pops up with event info - this isn't an issue) But if a month has 2+ events, the box resizes to display the info, but does not resize to fit everything else on the page.
If you look at the original theme demo, each box has spacing between each widget.
When you look at the screencap, you'll see that the spacing goes away and the extra events are (I'm assuming) being displayed underneath the widget below the eventON widget.
What I need is to make each of those containers responsive to the content that is being displayed in each one, regardless of the placement on the page while maintaining the same spacing between each widget container. Also, the actual page background needs to expand to meet content too, which doesn't seem to happen.
I've been trying to find a fix for about a week and am completely stuck.
Does all of that make sense - if this is confusing or if I'm not explaining it correctly, let me know.
Thanks.
The template has a very stiff design because each content div section (Hours, Latest Images, Lunch Special, Next Event, The Latest, and About) are absolutely positioned within the container div, and as far as I can tell, overflowing content is even hidden at the bottom of the main content section.
Using the Red Sun Themes as an example: You are correct, the overflowing contents from the "Latest Images" section (where you have your plugin) is displaying underneath the "Next Event" section.
One quick solution is to give the "Latest Images" div (this is the one that holds your plugin) a higher z-index than "Next Event". That way, it will display on top of "Next Event", instead of underneath it. Luckily the plugin isn't overflowing by much. Remember to give a z-index to all 3 divs in the column. Example: z-index:10; for "Latest Images", z-index:9; for "Next Event", and z-index:8; for the bottom "About" div.
Next size the height of your div to always have enough room for the plugin. Min-width may work well.
Then move "Next Event" a few pixels down so the overflow from "Latest Images" won't overlap its top. You'll probably have to move "About" down too.
Once you move the other 2 divs down, the bottom div might push past the bottom of the container, and its bottom contents may be hidden. One solution is to decrease the height of the divs by reducing font sizes/padding... Another solution is to increase the height of the main div that's directly under the container div. It looks like the height is in the html code too.
Note: From this end it appears that the template holds the div styles in the html code, so you may have to make your adjustments (z-index, top positioning) there.
Another solution would be to add a scrollbar (add width, and overflow:auto;) to the "Latest Images" section, so when the plugin overflowed, there would be a scrollbar. But then the content area would be effected by the size of the scrollbar.
Related
I'm using WPBakery on this wordpress site. I'm using an element called pageable content container as you can see on the front page. It has several slides which are changing every few seconds.
My problem is that every time the slide changes the container changes its size and gets smaller until the animation is finished. The whole bottom of the site moves. There are options to turn of or change the animations but it doesn't seem to do the trick. It just looks ugly.
My guess is that I have to give the container a fixed size via CSS? Or is there any other way? Appreciate your help.
I already tried everything whithin the WPbakery user interface. I can't turn of the basic animation which comes from bottom to top.
I also tried giving it an extra css class name and editing the custom css with height. But it didn't work
Try setting a minimum height for .vc_tta-panels. I tried this and it seems to have fixed it. However, the height of each slide will change depending on the amount of content you have in it...
.vc_tta-panels {
min-height: 200px;
}
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common
quick question. I have a tabbed interface for my site but I have all the parts of the site crashing into each other. How do I achieve a fluid layout where it simply resizes when the display is smaller. I read a few articles # alistapart and made my containing div relative to the browser window and every other div within the d container relative and still nothing. any clues on what else I should be trying?
alt text http://www.thelawyerschronicle.com/images/siteprob.jpg
The two biggest problems I see are the banner ad on top of everything else, and the tabs running over to the next line.
The tabs seem to do that simply because you have too many. You'll either need to make them smaller/decrease padding, etc. or put fewer items in the menu.
It looks like the banner isn't positioned correctly. Margin/padding?