I found other questions that address a similar problem, but this is slightly different, as the top bar content is dynamically changed. That means I don;t know at which screen width the bar will begin overlapping content.
This CSS works at a standard resolution with the current top bar text. I know I can use #media (max-width) in CSS to adjust the padding-top, but that doesn't account for dynamically changing top bar text.
body {
min-height: 2000px;
padding-top: 70px;
}
Is there a way to check the top bar's height, and add an offset to the body without using Javascript?
Another, perhaps better, option is to switch the top bar to the mobile view whenever it gets too crowded for a single row. Any thoughts on how to do that?
Thanks
https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/
Original fixed top example.
EDIT:
updated jsfiddle with javascript fix https://jsfiddle.net/4c2yespy/8/
There is no way to do this wit css only, but you could use the javascript resize event to dynamically change the body padding top:
function adjust_body_offset() {
$('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px' );
}
$(window).resize(adjust_body_offset);
$(document).ready(adjust_body_offset);
Related
Some time ago I posted this question trying to understand how could I change the size of a QScrollBar. I was able, at the end, to do what I wanted with the stylesheet code:
setStyleSheet("QScrollBar:vertical { width: 30px; };");
The problem is that, although the width of the scroll bar do change with the code above, the height of the up and down arrow widgets continues to be the same; they don't adjust automatically with the increase in width. So what I get now are two very flat up and down buttons in a large scroll bar.
Unfortunately I wasn't able to even "grasp" the arrow widgets, nor I know what would be the stylesheet code to control just them. The closest I got was from this SO question, but they don't apply to the vertical scroll bar.
So my question is: how can I change the size (particularly the height) of a (vertical) QScrollBar's arrow buttons? (note: no the arrow itself, but the normally square button that contains it)
The Desktop theme specifies the height of these buttons. To have them scaling proportionally you have to remove the styling by setting a background color:
QScrollBar:vertical {
width: 30px;
background: red;
}
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
Currently trying to find a clean solution for achieving the following layout for a sidebar like this
Header
Section 1 that updates it's (dynamic) height aligned to the content
Section 2 that takes the rest of the height with content that needs to scroll if it doesn't fit anymore
Footer
How to make Section 2 taking the remaining space between Section 1 and the footer as nothing I tried makes it happen?
#data_section {
/*Section 2*/
position: relative;
background: red;
/* This needs to be 100% of the 'reset' excluding the footer */
/*height: 100%;*/
/* he content needs to scroll if it outgrows the height */
/*overflow-y: scroll;*/
}
Is there a CSS only solution for this kind of layout that works on >= IE9 and current FF, Chrome, Safari versions?
As it is part of a JavaScript centric application nothing speaks against using JS to calculate the dimensions. But as I always have a hard time when it comes to CSS and it's capabilities it would be nice to see if there's a "clean way" in doing by CSS only.
Here's a fiddle with the barebones layout without getting Section 2 to do what it should.
I would suggest using display:table; and display: table-row. The nifty thing with these display types is that the rows will both try to fill the entire table as well as fitting the content inside. Because of this, you can set height: 0; to the rows that you want to merely fit the content, and let section 2 just fill the rest.
Here's a fiddle
Assuming that you have no content as per you Fiddle, my suggestion would be to add :padding-bottom : 90%; // adjust the value to your need to your css in #data_section, as this will mark up the color in entire remaining area without affecting the footer!
I'm quite new to web development and jQuery, so please bear with me.
I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.
This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.
The CSS I've added to the default nivo-slider.css is:
#media screen and (max-width: 31.25em) { /* 500px ÷ 16px */
.slider-wrapper{
overflow: hidden;
}
.nivoSlider {
left: -50%;
width:200%;
}
.nivo-caption {
margin-left: 25%;
width: 50%;
}
}
Thanks very much!
Just using CSS, you could add a one-off type class to that particular image, and throw that into your #media query:
.my-one-off { left:??px; margin-right:??px }
You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).
$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example
Or
$('img[src*="one-off.jpg"]').addClass('my-one-off');
I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:
img[src="YourSpecialPic.jpg"]{
left:50px !important;
}
You can also set a custom animation for one particular slide with the following img attribute within the HTML:
data-transition="slideInLeft"
You can sub any attributes to get the desired effect, but I think this will do the trick.
NOTE:
Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).
I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).