My WordPress Website Using Quidus Theme contains unnecessary space from the right which looks very bad. Please help: How can I remove this space? I want my web pages to fill the whole screen. There is no margin needed on the right or left sides.
Look at the image provided below of my website.
My Website Link is here
Note: I want all posts to fit the screen full width.
Your HTML structure is:
<div id="page">
<div class="site-content"></div>
<div class="right-sidebar-wrapper"></div>
</div>
Your CSS is:
#media screen and (min-width: 955px) {
.site {
max-width: 1718px;
}
}
#media screen and (min-width: 1105px) {
.site-content {
width: 56%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.site-content {
width: 70%;
}
}
#media screen and (max-width: 480px) {
.right-sidebar-wrapper {
width: 100%;
}
}
#media screen and (max-width: 768px) and (min-width: 480px) {
.right-sidebar-wrapper {
width: 100%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 70%;
}
}
#media screen and (min-width: 1105px) {
.right-sidebar-wrapper {
width: 22%;
}
}
The problem with your CSS is .site-content and .right-sidebar-wrapper width don't make it 100% of their parent.
Let's clarify:
at window width > 1105px .site-content = 56% while .right-sidebar-wrapper = 22% so 56% + 22% = 78% but 100% - 78% = 22% which is where the margin comes from at this resolution
at window width > 955 and < 1105 .site-content = 70% and .right-sidebar-wrapper = 70% which makes your right sidebar display below .site-content because 70% + 70% = 140% so #page can't contain at at the same line
To solve this change .site-content and .right-sidebar-wrapper CSS rules for their width so they take 100% of their parent's width at resolutions you want them to display next to each other.
Possible solution is to change:
#media screen and (min-width: 1105px) {
.site-content {
width: 56%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 70%;
}
}
to:
#media screen and (min-width: 1105px) {
.site-content {
width: 78%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 30%;
}
}
Related
I have a mobile layout for the website I am building, where the image of a mobile screen has to always appear a till it's navigation buttons. Below is the design mockup of how the image should look
I am using media queries, the width of the image and margin-top to position it according to the mockup. But at certain viewports, the image appears completely above the screen, which is mostly due to the different viewports resulting in different values for the percentage based units I am using.
An example image of what I am trying to convey:
Is there a better approach to position this image, so that it always shows up to its navigation bar, so that the position is consistent atleast in a particular viewport range, if not every viewport?
Any help is appreciated.
the website for reference : https://hackertronix.com
.mobile-phone-img {
display: block;
margin: 3% auto 0;
width: 70%;
}
#media screen and (min-width:24em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 85%;
}
}
#media screen and (min-width:25.75em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 66%;
}
}
#media screen and (min-width:30em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 60%;
}
}
#media screen and (min-width:37.5em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 65%;
}
}
#media screen and (min-width:42em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 55%;
}
}
#media screen and (min-width:48em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 50%;
}
}
#media screen and (min-width:50em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 45%;
}
}
#media screen and (min-width:55em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 40%;
}
}
<div class="mobile-card">
<h2>
Tracker
</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
<img src="images/getOnGooglePlay.png" class="mobile-button">
</a>
<img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>
Well known media query resolution for almost every devices.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
I have CSS below. My screen resolution is 1280x800. Why is my class .landslide not getting the margin value 10%? Right now it's always getting 18%? Even my screen resolution was 1280x800 which should be matching the max-height:800px.
What am I doing wrong?
#media (max-width: 1380px), (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
#media (max-width: 1380px), (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
Reverse the rules, otherwise the second one will always overwrite the first one:
#media screen and (max-width: 1380px) and (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
#media screen and (max-width: 1380px) and (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: http://origami.directory/)
What can I do so it changes 3 times as it should do?
.category-list-item {
float: left;
padding: 1em;
}
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
};
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
};
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
};
If someone could help me fix this I would be super grateful!
/ Martin
Remove the extra semi-colon ; from the end of your queries.
Your queries should be like this:
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
}
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
}
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
}
Your queries are conflicting with each other making the second query obsolete. Specify a range for each like this:
#media (max-width: 480px) {
.category-list-item{width: 33.33%;}
}
#media (min-width: 481px) and (max-width: 768px) {
.category-list-item { width: 25%; }
}
#media (min-width: 769px) {
.category-list-item { width: 20%; }
}
I'm not very sure with the min-width:769px part so just let me know what exactly are you trying to do and I'll fix that accordingly. The above is just to show you how queries work basically.
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}