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;}
Related
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
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.
I'm trying to implement an Off Canvas layout and I'm stuck (have spent half the day trying to figure this out). I basically want to use this off canvas layout from bradfrost Right Side Off-Canvas responsive pattern
What I want is:
On mobile the left and the right content should each be 100% width. The left content should be the one that is displayed by default and you click on a button to slide in the right content.
On desktop the left content should be set to 300px width and the right content should fit the rest of the width.
It seems like in the above code example, the width on desktop is set on the right content and the left content just fits the rest of the width. I basically want the opposite of that on desktop (left content fixed width, right side fits rest of width).
Another version of the code FOUND HERE is also similar (and might be easier to edit) but the problem is that the right content is what's displayed by default on mobile view. I need the left to be displayed by default on mobile view.
Any help with this would be greatly appreciated. Thanks in advance.
Is it what you want?
demo
Animating top/left really sucks on mobile devices. You should use css transform instead.
my theme (www.wortwaerts.net) works fine in IE8: If I change the window size by squeezing or stretching it, all elements (especially the search and category dropdown in the header) keep their position - and a horizontal scroll bar will appear if the screen gets to small.
My problem: In other browsers, e.g. Mozilla, squeezing the window makes the search shift upwards and the category dropdown downwards – also, the text content is cut off and no horizontal scroll bar appears that enables the user to read the cut-off content.
Does anybody know why only in IE8 all elements keep the position? And how to fix the elements and make a horizontal scroll bar appear in other browsers as well (how to change which theme files)...? Putting #screen { width: 58.875em; } into style.css doesn't work...
I'm really a starter and would be happy about any hint :o) Thanks, Felix
just add "min-width: 58.875em" to your code it shoud work but i'm not sure...