Disable Foundation Sticky on medium devices (tablets) - html

I have made a sticky sidebar with the help of foundation. Here is my code
<div class='row' id='top'>
<div class='left'>{some nested divs}</div>
<div class='right' data-sticky-container>
<div class='sticky'
data-sticky
data-anchor='top'>
</div>
</div>
</div>
My sticky is located in the right class and he is its container while the anchor is row class.
It works fine on PC and it is automatically disabled on mobile which is great.
Here is my problem - if I open it on Ipad or any other tablet the sticky leaves right and is on top of left.
I would prefer it if it could just be disabled.

Destroy by screen size
if (!Foundation.MediaQuery.atLeast('medium')) {
$('.sticky').foundation('_destroy');
}

What solved it for me was data-sticky-on = 'large' which disabled sticky on smaller devices

Related

How to make HTML container flex easier / scale navbar on mobile

This is currently what I have in my HTML code:
I have 3 of the "col-md-4" div's in the row, along with container--wrap in each of those, so that it fills the webpage with 3 equally sized containers. (div row is inside another div with class = container-fluid). When I adjust the window, the containers will stack on top of each other, but only after I make it much smaller (like 2/3). Also, on mobile, it does not stack at all and the containers are all really small. How can I make it so that these containers are able to stack (flex?) easier, and have them stack on mobile automatically? I also have a navbar that looks fine on mobile, but it remains small on mobile, just collapsed. How can I make it larger on mobile? Here is the navbar code:
cov19.cc (website) is an example of what I would like my site to do. The navbar is enlarged on mobile, and the container are stacked on top of each other rather than side by side. Thanks
For the First Problem, use display:flex for the row.I have also used media query so that when the user is on mobile screen or the size of screen is less than 991px, the containers will be on the top of each other.Please run it full screen and shrink the browser window to see the effect.
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width:98vw!important;
}
}
.row{
display:flex;
}
.container--wrap{
width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;
}
<div class="row">
<div class="col-md-4">
<div class="container--wrap">
This is one
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is two
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is three
</div>
</div>
</div>

Bootstrap fixed navbar is wider then html and causes x-overflow

On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.

Dispaly div as sidebar only on mobile device only using bootstrap

i would like act a div as overlay sidebar only on mobile device. Other than mobile device it should act as normal div.
Sample Code:
<div class="row">
<div class="col-lg-3" id="sidebar">
overlay sidebar only on mobile device
</div>
<div class="col-lg-9 col-12">
</div>
</div>
how do i make id="sidebar" act as normal div and sidebar on mobile device.
you can achieve using media query
#media screen and (max-width:767px){ //targets the mobile devices
#sidebar{
/*css code goes here*/
}
}
The best way would be to use jquery to collapse its width when the size for mobile screens has been attained
You should use d-block or d-none property like this:
d-sm-none or d-sm-block

CSS image corners don't round off consistently. Sometimes they do and sometimes they don't

I'm working on a mobile app. It's a protected website using jQuery mobile for the presentation framework. The protected content, the list of team members, is delivered via Ajax after authentication and identity verification. Here's a screen shot from my phone. The site is responsive, and can be used by desktop, tablet or mobile. Obviously it's optimized for mobile with tel:, sms: and mailto: links
I don't understand the odd corners on the images. This is erratic, and happens 75% of the time. This only happens to the upper left hand corner of the top image in the list, and the bottom left hand corner of the bottom entry in the list, no matter how long the list is. Generally, the corner displays round if you refresh the screen. I'm sure its some sort of timing issue, but I've not seen it before. I'm using iphone 6 with Safari browser for that screen shot. I see the exact same thing in Chrome on my laptop in desktop mode. I don't think this is a device or browser dependent issue.
HTML:
<div id="page6_team_phones">
<div role="main" class="ui-content jqm-content">
<h2>Phone Contact List</h2>
<ul data-role="listview" id="phonelist" class="ui-listview">
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://images.unsplash.com/photo-15..."></div>
<div class="userName">Andrea Apple</div>
<div style="clear: both;"></div>
<div class="phoneNumber">1234567891</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://i.imgur.com/KOXOBiN.gif"></div>
<div class="userName">Bill Banana</div>
<div style="clear: both;"></div>
<div class="phoneNumber">9876543211</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
CSS:
.img_container {
float: left;
}
.img-photo {
height: 24vw; /* photo = square aspect ratio */
width: 24vw;
object-fit: cover;
border-radius: 20%;
}
Anybody understand exactly what is causing this issue? Why only top left and bottom left? Best way to improve the display?
Upon inspection, I've found that jQuery mobile has some CSS that affects the first and last elements in your list. You could modify the styles directly, but it's probably much better to override the jQuery mobile CSS by adding !important to the property (border-radius: 20% !important;). Doing that in your JSFiddle fixed it for me.
Here's a fixed example.
I know there's already an accepted answer but it feels more like a patch than a full understanding.
That rule only triggers for any element that is NOT of a class .ui-li-icon as you can see below:
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon)
So simply add that class to your image like so:
<img class="img-photo ui-li-icon" src="https://images.unsplash.com/..." onclick="openImgModal(this.src)">
This will tell CSS to NOT apply those rules.

Bootstrap acting as mobile from 980px - 1200px

I've recently began using Bootstrap and have not had any problems doing so except for this one issue I've run into. I've set up my own personal website using it and styled it to be responsive and so far it looks great on everything.
But the problem I am having is that from 980px - 1200px, Bootstrap renders the page in full-page rows (exactly as it does as if it were on mobile). I'm using bootstrap-responsive.min My page set up is:
<div class="row-fluid">
<div class="span3"> <!-- sidebar here --> </div>
<div class="span8"> <!-- content of each page --> </div>
<div class="span1"> <!-- empty for spacing --> </div>
</div>
980px-1200px is the only interval for which it renders correctly, and I so far have no media queries for that interval. Has anyone run in to this problem before? Or does anyone know what might be causing this?
A page example can be seen here (you will notice if you slowly resize the browser window):
http://portfolio.jrstrauss.net/work/
You have a media query targeting screen widths up to 979px,
#media (max-width: 979px) and (min-width: 768px)
And the next one is targeting screen widths of 1200px and up
#media (min-width: 1200px)
anything in-between 980px and 1200px will be using the default styles. You can fix this by changing the 2nd media query to have a min-width: 980px instead of 1200px.
[edit] It's something completely different: You need to rewrite/fix your HTML, e.g. you can apply .span3 to the header element, so it floats as intended. The same goes for your second block.
<header class="row-fluid" style="display: inline-block;">
<nav class="main span3">
…
</nav>
</header>
You basically did set the correct classes, but then added full-width block elements inside.