I have a Wordpress website installed "Quidus Theme" http://theme.socialflag.net/latest-free-wordpress-themes/.
There is a big unnecessary space from the right side which looks is very bad.
I want to remove this space and want my web pages to fit to the whole screen.
If there is something i can change in my CSS style please let me know.
One of my friend provided this code but I don't know what to do with this or where to put the code.
Note: I want all my posts to fit to full width not only the page link i provided.
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Undertake the following:
Override the max-width property in the layout to 100% (or if you'd like, you can look for the rule and remove it in your css
Set your div with id content to a width of 78%
click here for codepen
Change the css site-content in media screen and it will look like the attached image:
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Use the developer tools in your browser (i.e inspector in Chrome or firebug in Firefox) to see where the padding is coming from.
Either the padding is applied to something other than the body, or the padding is applied to the body but is still overriding your CSS. For example:
body.class {
padding: 20px;
}
Would override your CSS. or
body {
padding: 20px;
}
Declared after your CSS would still override.
I face same problem on my website http://calendarsnews.com/ But when I used this process after it solve my problm
Related
I want to print the content of tag. All the previous question on portal shows the answer but in that the card shape in print tab is distorted.I want the exact same print of ID card. I want the output as the div content is written.I want to print the ID card with the black borders. the tag has a css file include.
Please see the picture
Look into CSS media queries.
#media print{
}
Can be used to apply specific CSS rules to the document when outputted to the printer. I'm guessing your issue is that you are trying to print the entire page and not just the card, causing scale-based distortion.
EDIT:
Here's a nice thorough introduction to print styles: http://edutechwiki.unige.ch/en/CSS_for_print_tutorial
EDIT:
Here's a more concrete answer to your question:
#media print{
*{
display: none;
}
html, body, #card{
display: block;
margin: 0;
max-width: 100%;
height: auto;
}
}
The * rule is a wildcard to hide everything -- you may need to customize this if your #card is wrapped in anything (you don't want to hide those -- you'll just want to remove any styles on them, such as background color, margins, or padding).
The next rule makes sure html, body, and #card are shown and have no margins applied to them -- this is to ensure that #card is positioned flush with the top-left of the page.
I've also thrown a max-width: 100% and height: auto on those elements to ensure #card can't be larger than the page.
I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...
I'm running a site on the responsive Sterling WordPress theme (www.bandleandzaeske.com), and I'm having issues with the responsiveness of the body copy. The header and footer of the site are both responsive on mobile and browser-resizing tests, but the body text bleeds into the left and doesn't conform to the resize.
If I change the following "width" definition to 100%, it works fine, but it also pushes the one_third form below the text.
.two_thirds {
width:640px !important;
float:right !important;
}
Any ideas? Suggestions? I'd be happy to copy more code if that provides more insight.
Thanks!
Change width to max-width should work:
.two_thirds
{
max-width:640px !important;
float:right !important;
}
Simply remove width: 640px !important; from the following CSS style in your index.php (line 368). (Leave float:right!important as it is):
.two_thirds {
// width: 640px !important;
float: right !important;
}
That should fix the issue, as this code is overriding your theme.
Apparently, these styles are generated based on your theme settings, I guess that's where you can change this.
There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}
I'm using bootstrap 2.0 from twitter and unsure how to make it responsive.
How can I remove elements when in mobile/small screen mode?
How can I replace elements (i.e replace a big picture with a smaller one)?
Change a <h2> to be <h5>? etc.
Hiding Elements
You can hide elements with:
display: none;
visibility: hidden;
Hopefully you're using LESS or SASS so you can just specify:
#mixin hidden {
display: none;
visibility: hidden;
}
And then easily mix it in when necessary:
footer {
#include hidden;
}
Just apply them to any selector in the relevant media query. Also, understand that media queries cascade onto smaller media queries. If you hide an element in a wide media query (tablet sized), then the element will remain hidden as the website shrinks.
Replacing Images
Bootstrap doesn't offer image resizing as the screen shrinks, but you can manually change the dimensions of images with CSS in media queries.
But a particular solution I like is from this blog post: http://unstoppablerobotninja.com/entry/fluid-images/
/* You could instead use ".flexible" and give class="flexible" only to
images you want to have this property */
img {
max-width: 100%;
}
Now images will only appear in their full dimensions if they don't exceed their parent container, but they'll shrink fluidly as their parent element (like the <div> they're in) shrinks.
Here's a demo: http://unstoppablerobotninja.com/demos/resize/
To actually replace images, you could swap the background image with CSS. If .logo has background: url("logo.png");, then you can just specify a new background image in a media query with .logo { background: url("small-logo.png");
Change h2 to h5
If this is because you want to change the size of the heading, don't do this. H2 has semantic value: It's not as important as H1 and more important than H3.
Instead, just specify new sizes for your h1-h6 elements in media queries as your website gets smaller.
#media (max-width: 480px) {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 80%;
}
}
I've been playing with the responsive parts of bootstrap for the last few days, take a look at /less/responsive.less to get an idea of how you can utilize the responsive features of bootstrap.
You basically look at the browser's width/height to determine which css properties to apply to the page. So, for example if you want to change h2 when the user is using a smaller device, you would do something like this:
#media (max-width: 480px) {
h2 { font-size: 15px; }
}
You can do this with any style you want to affect when the size of the screen changes.
You can replace some elements by utilizing css replacement methods and then just have different styles affect things at different widths. Or you could use jquery or maybe response.js to do it. I'm still playing with this part of it.
For responsive images you could have
.responsive-image { max-width:100%; height:auto; }
and you could use this as
<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">
For responsive navigation
Use tinynav https://github.com/viljamis/TinyNav.js
This converts <ul> and <ol> navigation to a select box for small screens.
As to your first question - I'm not sure if this was available when you asked, but Bootstrap has classes "hidden-phone", "visible-desktop" etc to handle hiding of elements on different sized screens. Just add the .hidden-phone class to an element and it will disappear on screens smaller than 768px wide.
EDIT
After the release of bootstrap 3, the 2.3.2 documentation is now at:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
The new 3.x documentation is at:
http://getbootstrap.com/css/#responsive-utilities
I think bootstrap has built-in features for this (in responsive-utilities.less):
<a href="#">
<span class="visible-desktop">Click here to get more information</span>
<span class="visible-tablet">More information</span>
<span class="visible-phone">Info</span>
</a>