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>
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.
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;
}
}
I've got the following two media queries:
#media (max-width: 800px) {
.login{
margin-top: 5%;
}
}
}
#media (max-width: 204px) {
.login{
text-align: center;
margin-right: 0%;
}
}
}
Desktop to mobile
When commenting out the top query the bottom one executes
When applying the bottom query styling in the developer tools it works
I've read this about queries: https://css-tricks.com/logic-in-media-queries/
I must not understand something right.
Looks like you've got one too many closing braces which might be messing things up.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
You have added a extra closing braces. Please remove it.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
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======*/
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%;
}
}