My website is www.rosstheexplorer.com.
I was recently given the following code -
body.custom-background {
background-image: none;
}
#media screen and (min-width: 800px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
On non mobile devices this solved the problem I was having with H1 and the plugins overlapping the navigation menu. Annoyingly on mobile devices the problem persists.
I tried to resolve the problem on mobile devices by modifying the code to the below but it sadly did not give me the desired result. Does anyone have a suggestion?
body.custom-background {
background-image: none;
}
#media screen and (min-width: 1px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
#media screen and (max-width: 660px) {
img.mobile-header-img {
display: block;
}
}
This occures because you mobile navigation menu has negative bottom margin. Because of that, it just "pulls" content from underneath it.
To fix that you need to reset the bottom margin like so...
#media screen and (max-width: 799px){
.main-navigation {
margin-bottom: 0;
}
}
Related
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
I added the following custom CSS to my wordpress theme to change the location of the menu on the mobile version of the site:
#media (max-width: 767px) {
.mob-nav {
top: 25% !important;
}
I then added this code to adjust the margins on the logo for the full desktop version of the website:
#media (min-width: 992px) {
.right-menu .logo img {
margin-top: -15px !important;
}
#media (min-width: 768px) {
.right-menu .logo img {
margin-bottom: -5px !important;
}
When I added the second bit of code it overwrites the CSS I added for the menu. I know they're conflicting somehow but I'm not sure how to fix it.
Thanks
Try this:
#media (max-width: 767px) .mob-nav { top: 50% !important; }
#media (min-width: 992px)
{
.right-menu .logo img
{
margin-top: -15px !important;
}
}
#media (min-width: 768px)
{ .right-menu .logo img
{
margin-top:0px !important;
margin-bottom: -5px !important;
}
}
I got it working, I change the top portion of your code to:
#media (max-width: 767px)
{
.mob-nav
{
top: 25% !important;
}
}
I guess it was missing a { before .mob-nav
Thanks for the help!
I have a clickable icon image in the header of my web page; I want to hide the icon image when the page is pulled up on a desktop, laptop, and/or any larger screens. However, I want the icon to show when the page is pulled up on a mobile device/ phones and hand-held tablets.
This is what I tried:
#media screen and (min-width: 0px) and (max-width: 700px) {
.ghost {
margin-left: 500px;
/*show the icon on smaller screen*/
}
}
#media screen and (min-width: 701px) and (max-width: 1024px) {
.ghost {
margin-left: 500px;
display: none;
/*hide the icon on larger screens*/
visibility: hidden;
}
}
/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
...could I get some help with this please? ...thanks
Hi
If you want to display icon JUST on <= 700px devices your code should look like this below. Setting min-width: 0px in first #media and max-width: 1024px in second is unnecessary.
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
}
}
#media screen and (min-width: 701px) {
.ghost {
margin-left: 500px;
display: none; /* Acts like this item isn't there at all */
visibility: hidden; /* Doesn't show the item, but saves space for it */
}
}
I don't know your full issue, but if you want to act like it isn't there on large screens this CSS below will be better ;)
.ghost {
display: none;
}
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
display: initial;
}
}
More info about media queries you can find e.g. on this W3Schools site.
Cheers
Try this
You have to write only one media query. Like this
#media only screen and (min-width: 767px) {}. It for mobile devices.
.ghost {
display: block; /* default it will show in mobile devices. */
}
#media only screen and (min-width: 767px) {
.ghost {
display: none; /* it will hide larger than 765px eg: laptop and desktop */
}
}
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
The standard resolution for desktops is 1024px.
For tablets, it is 768px and for mobile it is 320px;
So to hide the image for desktops and above, you could do the following:
.ghost {
cursor: pointer;
}
#media (min-width: 1024px) {
.ghost {
display: none;
}
}
<div onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}
I am using a NextGen Gallery on my Wordpress site, but the gallery box does not respect the lefthand margin of the rest of the page (that is, all other images, text, etc. is has some sort of indentation or padding, but the NextGen Gallery floats all the way to the left). I would like to prevent it from overriding this padding, or at least to float to the center. I've tried editing the css in several places, but I may be editing the wrong class, or something. An example of the gallery is near the bottom of the page at http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/ Thanks.
Don't know about making it respect left padding, but this does work to make the entire set of thumbnails to float to the center.
.ngg-galleryoverview {
text-align:center;
}
.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}
Add these lines to your style.css and you should be all set:
.ngg-galleryoverview { text-align: center; }
.ngg-gallery-list { display: inline-block; margin: 0; }
.ngg-gallery-list li { float: none; display: inline-block; }
I had the same issue, but needed a solution that worked for all nextgen galleries dynamically, so I used media queries. BTW, I could not find any other solution and don't know how to use the above code.
I'm using Catalyst/Dynamik theme so I can set an exact page width and #container-wrap initial padding, but that didn't do anything for centering the thumbnails or improve the mobile device look.
These are my media queries, you would have to adjust for your thumbnail size, I used 220px wide.
Final result: http://site01.profoliolive.com/fixed-grid/ Tested on iPad, iPhone and Android phone.
#media (max-width: 1209px) {
.ngg-galleryoverview { padding-left: 115px; }
}
#media (max-width: 1170px) {
.ngg-galleryoverview { padding-left: 90px; }
}
#media (max-width: 1140px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 1120px) {
.ngg-galleryoverview { padding-left: 70px; }
}
#media (max-width: 1090px) {
.ngg-galleryoverview { padding-left: 60px; }
}
#media (max-width: 1070px) {
.ngg-galleryoverview { padding-left: 50px; }
}
#media (max-width: 1050px) {
.ngg-galleryoverview { padding-left: 40px; }
}
#media (max-width: 1030px) {
.ngg-galleryoverview { padding-left: 25px; }
}
#media (max-width: 1010px) {
.ngg-galleryoverview { padding-left: 20px; }
}
#media (max-width: 990px) {
.ngg-galleryoverview { padding-left: 10px; }
}
#media (max-width: 975px) {
.ngg-galleryoverview { padding-left: 120px; }
}
#media (max-width: 900px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 860px) {
.ngg-galleryoverview { padding-left: 60px; }
}
#media (max-width: 830px) {
.ngg-galleryoverview { padding-left: 40px; }
}
#media (max-width: 800px) {
.ngg-galleryoverview { padding-left: 15px; }
}
#media (max-width: 760px) {
.ngg-galleryoverview { padding-left: 0px; }
}
#media (max-width: 741px) {
.ngg-galleryoverview { padding-left: 110px; }
}
#media (max-width: 660px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 620px) {
.ngg-galleryoverview { padding-left: 25px; }
}
#media (max-width: 507px) {
.ngg-galleryoverview { padding-left: 20px; }
}
Simple way is to use:
<center>[nggallery id=1]</center> or <div align="center";>[nggallery id=1]</div>