I have a clickable javascript link (Trustwave) on my desktop website theme which I'm trying to disable on mobile screens:
In footer.tpl:
<div style="position:absolute; margin-left:100px; margin-top:50px">
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=invert"></script>
I now know how to remove a clickable image link on mobile screens (Remove image link in mobile screen) for example:
In footer.tpl:
<div class="column">
In stylesheet.tpl:
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
}
but I've no idea how to re-create the javascript link so that it does not display on mobile screens. Thanks in advance!
You can use the media queries properly by putting the media query on the end as max-width is most probably getting confused of the context
`
Here is an easier way.
#media all and (max-width: 1500px) {
.hide {
display: block;
}}
#media all and (max-width: 480px) {
.hide {
display: none;
}}
OR
You can use window.innerwidth() to detect the width of the viewport and store it in a variable say x
And then use
var m = document.getElementById("column")
If (x>800)
{m.style.display='block'}
else
m.style.display="none"
Related
The mobile nav icon disappears just fine to reveal the desktop nav when I expand the window, but the mobileNavSections div doesn't disappear when it's greater than the specfied screen width. The toggling function works as intended.
function displayMobileNav(){
var x = document.getElementById("mobileNavSections");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobileNav {
display: none;
}
#mobileNavSections {
display: none;
background-color: white;
position: fixed;
z-index: 1;
margin-top: 60px;
width:100%;
height: flex;
}
#mobileNavSections a {
display:block;
color: black;
margin: 5%;
text-decoration: none;
font-size: 17px;
opacity:0.5;
}
#mobileNavSections a:hover {
opacity: 1;
}
#media only screen
and (max-width: 768px){
.mobileNav{
display: block;
}
.mobileNav img {
height: 30px;
}
.mobileNav:hover {
cursor: grab;
}
}
<nav>
<div class="mobileNav" onclick="displayMobileNav()">
<img src="images/menuicon.svg">
</div>
</nav>
<div id="mobileNavSections">
About
Contact
中文
</div>
Adding this css media query should finish hiding the nav part that you are not covering with the JS
#media screen and (min-width: 769px){
#mobileNavSections{
display:none;
}
}
I would definitely recommend more of a mobile first when putting together the css. Media queries and overrides can quickly become a headache. Here are some tips and further reading:
Mobile first CSS is written like this:
Styles for mobile and styles that are common to all screen sizes
(no media query)
[icon name=icon-arrow-down]
Media query with a smallish min-width breakpoint
e.g. #media (min-width: 400px)
[icon name=icon-arrow-down]
Media query with a slightly larger min-width breakpoint
e.g. #media (min-width: 600px)
[icon name=icon-arrow-down]
Media query with a larger still min-width breakpoint
e.g. #media (min-width: 960px)
One way to think of it is that you start with a mobile base and build up (or out, if you think in terms of widths).
https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
I'm wondering if there's any way to remove a mobile menu from Wordpress, which automatically is activated at 48em or 767px.
There is no code in the CSS of my site which enables that hamburger menu and I tried one solution such as adding to styles.css the following code:
button.menu-toggle {
display: none !important;
}
and
#top-menu {
display: block !important;
}
(the site is http://areolamodels.com/)
But it still won't work – the hamburger button is gone, but the top-menu displays in the design, which is different from the desktop version and I want to have to desktop version... Is there any js function that does it instead of CSS?
Thanks!
you may add this code :
#media all and (max-width:767px) {
#top-menu {
display: block!important;
margin: 0;
text-align: center;
background: none;
}
.main-navigation li {
display: inline-block;
margin: 0 10px;
}
button.menu-toggle {
display: none!important;
}
}
it will adjust the style so the menu remain like desktop
Remove #media screen and (min-width: 48em) from
#media screen and (min-width: 48em)
.main-navigation {
width: auto;
}
Check out this selector:
.js .main-navigation.toggled-on > div > ul
This is the one toggling display
I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid
I am using Bootstrap to display a random tweet and a static image alongside it.
It looks great, but the text is always vertically at the top, instead of center of the image.
How do I resolve this so no matter the length of the tweet, it'll display in the middle vertically?
Demo: https://jsfiddle.net/9wwuznpL/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
background:black;
margin: 10px;
color:white
}
img {
float:left
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
img {
float:none
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 text-center col-md-push-3">
<div class="tweet">
<!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
<img src="http://placehold.it/100x100">
<blockquote>
<p>
RT #thetomzone : Seriously, drop everything you're...
</p>
</blockquote>
</div>
</div>
</div>
I would say the easiest way is to set some css like this:
.tweet {
display: table;
width: 100%;
}
.tweet blockquote {
display: table-cell;
vertical-align: middle;
}
Or you could use display: flex; if the browser support is enough: http://caniuse.com/#search=flex
Demo: https://jsfiddle.net/9wwuznpL/4/
Give
img, blockquote {
float: none;
display: inline-block;
}
JSFIDDLE
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
background: black;
margin: 10px;
color: white
}
img,
blockquote {
float: none;
display: inline-block;
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
#media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
img {
float: none
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width: 480px) {}
/* Custom, iPhone Retina */
#media only screen and (max-width: 320px) {}
.tweet:after {
clear: both;
display: table;
content: '';
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 text-center col-md-push-3">
<div class="tweet">
<!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
<img src="http://placehold.it/100x100">
<blockquote>
<p>
RT #thetomzone : Seriously, drop everything you're...
</p>
</blockquote>
</div>
</div>
</div>
You need to change the default display of both elements, image and blockquote, to inline-block. Then you can use vertical-align css property and set its value to middle. You should set a width or max-width to the blockquote element, because if you don't do this the blockquote could place itself below the image.
I modified your fiddle: https://jsfiddle.net/9wwuznpL/1/
img {
display: inline-block;
vertical-align: middle;
width: 100px;
}
blockquote {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px);
margin-bottom: 0;
text-align: left;
}
As you could see you can use calc for the quote width value, e.g. if the image is 100px wide the quote must be calc(100% - 110px). You must know that inline-block elements work as typography, so an empty space will work as a nbsp; so you should add around 4 extra pixels. In my example I added 10 more pixels, but with only 4 this should work properly.
You can achieve your effect in a few different ways: Flexbox, absolute positioning with transformations, and display: table/table-cell with vertical-align. Since the other answers have already covered the other types, here's the Flexbox version:
.tweet {
border: 1px solid black;
/* Use .tweet as flexbox container */
display: flex;
/* Align all items in the middle of said container */
align-items: center;
}
.tweet__avatar, .tweet__body {
border: 1px dotted red;
}
.tweet__body {
margin: 0;
/* This instructs the browser to stretch .tweet__body all the way to the end.
Otherwise it would stop at the end of the content. */
flex-grow: 1;
}
<div class="tweet">
<div class="tweet__avatar">
<img src="http://placehold.it/100x100" alt="">
</div>
<blockquote class="tweet__body">
<p><cite>RT #thetomzone</cite> Seriously, drop everything you're...</p>
</blockquote>
</div>
How to detect which the media query is in use,like"
#media (max-width: 979px) {
.menubar ul li a {
border: 1px solid transparent;
color:rgb(148,168,148) ;
display: block;
margin: 0;
padding: 3px 13px;
position: relative;
text-align: center;
z-index: 400;
font-size:14px;
}
}
#media (max-width: 1200px) {
.menubar ul li a {
padding: 10px 15px;
text-align: left;
font-size:19px ;
}
}
I just want a method to get the matched media query string,return "#media (max-width: 979px)" or "#media (max-width: 1200px)" in this case.
Check this JSFiddle. As pointed out in the comment, both styles will be applied, whereas the overlapping styles (for instance, font-size, text-align etc... that are common for both CSS styles) will be overwritten by the other (based on their ordering in the style sheet).
For simplification and demo, I have applied the styles to a tag and used the following HTML code,
Test link
Below is the style applied for the anchor tag based on your style. You can check this in your page using developer tools from browser (I have used FireBug)
Note: If you are targeting devices based on their screen size, you should consider using the max-device-width instead. Refer this