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
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 am editing a data-driven website that uses data from an automation database engine. Inside the HTML, I have a fixed size button and within that are texts that come from the database. I want to add some css styles that would resize the font so that it always fits inside the div button.
Here is my code:
CSS:
.button {
width: 216px;
height: 44px;
background-color: 00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
line-height: 45px;
font-weight: 500;
text-align: center;
#media screen and (max-width : 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 40px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
}
HTML
<div class="button">View Your Plan</div> (static/not data-driven)
<div class="button">Current Members Click Here</div> (data-driven)
<div class="button">Enroll Now</div> (static/not data-driven)
The second/middle button is a data driven button. Sometimes, the words will be longer than "Current Members Click Here". Sometimes, it will be "See Your Plan Discount Program Here". The problem is if take out the font-size and line-height, it will default the font-size, which makes it small. How do I fix this so that the dynamic text will always fit inside the div button whether it is short or long? Can it be done with just CSS or is there a JS solution?
Here is what it looks like now:
Desktop View
Mobile View
Goal:
Desktop
Mobile
EDIT:
I just read a comment that you want that data-driven button to have a smaller font than the others. Just specify it in the class I used for that button, setting a smaller vw in your font-size.
This is possible using VW units, you will need to support older browsers with a fallback though. I don't know if this breaks in larger desktops but hopefully you can get an idea of this approach.
.button {
width: 216px;
min-height: 44px;
background-color: #00baf2;
color: #fff;
border-radius: 5px;
font-size: 23px;
font-size: 2vw;
font-weight: 500;
text-align: center;
line-height: 44px;
}
.button.data-driven {
line-height: 22px;
}
#media (max-width: 992px) and (min-width: 768px) {
.button {
font-size: 23px;
font-size: 2vw;
}
.button.data-driven {
line-height: initial;
}
}
#media screen and (max-width: 768px) {
.button {
width: 400px;
height: 81px;
font-size: 30px;
line-height: 81px;
background-size: 400px 81px !important;
float: none !important;
clear: both;
margin: 25px auto;
padding-top: 0;
}
.button.data-driven {
line-height: 81px;
}
}
<div class="button">View Your Plan</div>(static/not data-driven)
<div class="button data-driven">Current Members Click Here</div>(data-driven)
<div class="button">Enroll Now</div>(static/not data-driven)
What you're after is a dynamic font size that scales to fit, and you can't do that with just CSS. You can apply different classes conditionally which could affect the font size. For instance:
.button.small-text {
font-size:12px;
}
.button.medium-text {
font-size:18px;
}
.button.large-text {
font-size:23px;
}
You would need to redefine these in your media queries to fit the different button widths.
Then you have to either use backend or frontend script to apply small-text, medium-text or large-text.
With jQuery this might look like:
$('.button').removeClass('small-text medium-text large-text');
$('.button').each(function() {
var len = $(this).text().length;
if (len < 20) {
$(this).addClass('large-text');
} else if (len < 40) {
$(this).addClass('medium-text');
} else {
$(this).addClass('small-text');
}
});
All you have to do is to remove the height to the button to make it dynamic. So the button will grow as the text increases. and do add a display:inline-block to the button class.
If you need to make the button with fixed/constant height, use a % value in the font-size of the button.
like font-size:10%; as % denotes a relative value, you could use that.
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"
I have a resposive site which works fine on desktop and mobile version but on Tablet version, text and images are not in appropriate places and move towards right side making it non-responsive.
You can check the link here for screenshot:
https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
This is my website: http://www.sociolife.co.in/
PS: When site is opened at full browser width in desktop, this problem wont occur but when you try to decrease the browser width search bar and subscription box is moving towards right.
Please can you tell me if there is any CSS problem or is there any javascript problem and how can I fix it?
Your meta viewport is wrong. You should use something like this :
<meta name="viewport" content="width=device-width, initial-scale=1">
You can check out this : https://css-tricks.com/snippets/html/responsive-meta-tag/
Edit : I thought you meant your website wouldn't work in tablet / mobile view. Looking at the code, the width for #main-nav and probably the other few elements are still fixed at 1000px in the 'tablet view'. I think there's something wrong in your media queries.
Edit 2 : Based on your CSS, here's some relevant code (I'm taking #main-nav as example, you can check for other affected elements) :
#media only screen and (max-width: 1028px){
#main-nav{
width:1000px;
}
}
#media only screen and (max-width: 725px){
#main-nav{
width:430px;
}
}
Do you see the problem now? You're making the navigation 1000px wide for screen sizes between 726px and 1028px. You should have used width:100% or width:725px for your #main-nav's 'tablet version'. Now you just need to apply the same principle and check for other areas of your website which have the same problem.
Change in your html file:
At line 1195 of your source code change wiz.
#main-nav {
width: 1000px;
}
change it to:
#main-nav {
width: 103%;
}
At line 1201:
.column-right-outer{
width:320px;
float:left;
}
to the below code:
.column-right-outer{
display: none;
}
At line 1204 change this:
.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}
to this:
.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}
edit- 27/04/15
delete the following lines at line 1208:
#menu-main {
display: none;
}
Add the below lines of code in a separate <style></style> tag in your HTML file.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}
Now your site will look much better. :)
This works well.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}