Hello when I go and view my website my mobile view for my menu is still showing. I want it to go back to normal. after 768px;
I have looked every where can find out why its doing it like that.
http://codepen.io/mwbcomputers/pen/jvpcq
You have display: none; within your media query for 1024
#media only screen and (max-width: 1024px) {
#container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.nav {
display: none;
}
// more css
Remove the following code from the media query
.nav {
display: none;
}
Related
Here is my site:
http://www.gregorydanelian.comule.com/ken
I want thumbnail gallery to be centred at all times but I am having trouble doing this.
I know I can use
text-align: center;
On the parent element and then set the thumbnails like so:
display: inline-block;
However nothing is working, the thumbnails always float left.
I have tried adding media queries to force the margin from left (for example):
#media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;
}
}
But there must be an easier way to just get the ul to centre no matter what the width is.
How can I centre the thumbnail gallery on all browser widths?
Add these changes and remove those left-margins you set !important on ul
.thumbnails > li {
display: inline-block;
float: none;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnails {
margin: 0 auto;
text-align: center;
width: 100%;
}
Important: Add this to end of your css/mystyles.css file.
Add this CSS media query
#media (min-width: 1200px)
.thumbnails {
max-width:1200px
}
you may have to adjust media queries for multiple screens.
I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:
In footer.tpl
<div id="footer">
<div class="column">
In stylesheet.css
#test {
#media screen and (max-width: 480px) { image display: none; }
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
Is there any way the link could also be removed? Thanks in advance.
Give your element a display:none; on the media query.
#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;
background: whitesmoke; /** Testing purposes **/
}
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
<div id="footer">
<div class="column">
Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Right now your media query looks invalid.
To hide the link, you could do this:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Note that this will override the display style of your #test element.
Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.
I'm sure this has been asked but I can't seem to find an example that isn't using SASS. I just have a regular CSS file that I'm working with. I want the burger menu to change to the horizontal menu on the larger size.(#media only screen and (min-width: 64.063em)) I've seen a few posts saying to update the settings.scss file like this(http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss) but again I'm not using SASS for this project. I just can't seem to figure out what is triggering the menu to change from mobile to desktop: media queries or javascript.
If you want to use CSS you can override the Foundation CSS in a separate CSS file (ie:styles.css) section that follows the foundation.css
Demo on Codeply
#media only screen and (max-width: 64.063em) {
.top-bar {
overflow: hidden;
height: 2.8125rem;
line-height: 2.8125rem;
position: relative;
background: #333;
margin-bottom: 0;
}
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 16px;
margin: 0;
}
.top-bar .toggle-topbar.menu-icon {
top: 50%;
margin-top: -16px;
display:block;
}
.top-bar .title-area {
float: none;
}
}
http://codeply.com/go/OtVVMn0n6V
If you don't want to use SASS, then you'd better change foundation.css file.
Around line 1682 change it from
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em;
}
to
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
Also around line 2006, change it from
#media only screen and (min-width: 40.063em) {
To
#media only screen and (min-width: 64.063em) {
I am creating a new website, here is the www.qldmetals.com
Everything seems to be fine on website except its responsiveness on iPhone. In iPhone the logo sits over the navigation menu. I tried the following media query, but it doesn't seems to be working for me i.e
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { .logo a.brand { display: block !important; }}
I'm confuse, Is this error because of display method or anything else (like I have to use media query for any other class)
I appreciate your help and your valuable time.
Thank you.
I have seen your website and after that i have created some of my own style element which i am sharing it's only for media screen max width 480px
Following Code
#media (max-width:480px){
.logo a.brand {
display: block !important;
height: auto;
line-height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
width: auto;
}
.logo a.brand img {
float: none;
height: auto;
margin: 2px 8px 2px 0;
width: 100%;
}
header .logo{
float: none;
max-height: none;
text-align: center;
width: 100%;
}
}
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.