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.
Related
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>
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}
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>