I have a wordpress blog and I use a responsive theme. I want to increase my site width. Currently its width is 1050px ( main-container). I wish to expand it to the 1200px or 1280px.
Before change it, I want to know what is the optimum width for a web site?
Thanks!
I hope I'm understanding this correctly, but
100% as that's the only width that will display at full width in all browsers. Do this in your CSS, like:
body{
font:14px Arial, Helvetica, sans-serif;
margin:0;
background:#383838;
width:100%;
color:#444444;
Related
I've been trying to set a minimum font size for some text on my website. Previously this text used to shrink to an illegible size at mobile size so I set up a media query so that a specific font-size is set for smaller screen sizes.
#media (max-width: 760px) {
.tp-caption.medium-text {
font-size: 15px !important;
text-align:center !important;
margin-top: 30px !important;
}
}
The problem I'm having is how to get the text to wrap normerly. At the moment it doesn't wrap. When I add 'white-space: normal' to the styles it seems to wrap every word and I can't work out what other styles are working on this element to make it wrap in this strange way?
The website is here : www.alexch.net/ignition
Any advice would be appreicated
Many thanks
Alex
If you are asking how to wrap text, the css for this is;
word-wrap: break-word;
Your site should not be shrinking text, are you using % for font sizes?
I have created a page with media queries in my CSS so that it should respond to the viewport of the device.
When I use the Firefox web dev tool for responsive design I can see how my site reacts. But when I resize my browser I cannot.
http://champlain.torqueweb.com/html/Responsive1.html
Should I use a different value for my meta?
max-device-width should be:
max-width
Works, I tested it
You are using fixed width in your style sheet.
F.i.
nav {
width:1024px; <<<< prevents responsiveness as the width will be fixed
height:40px;
font-family: Arial;
margin: 0 0 10px 0;
list-style: none;
background-color: #000033;
}
These fixed widths are not reset in your media queries (i.e. #media ...).
Either make the modifications in the media queries or better still use % or em messurements where it is not absolutely required to have fixed width or height.
F.i.
nav {
width:100%; <<<< will resize to the max available width
height:40px;
font-family: Arial;
margin: 0 0 10px 0;
list-style: none;
background-color: #000033;
}
Point 1 is you are centering the page up, I think we shouldn't center the page up(I mean the whole body thing or even the container) for a responsive page design...
Like if you do not actually define the width property, the browser will assume at take it as auto, so the page will spread through out the browser window.
Maybe that should be helpfull(don't judge me, I am not very experienced :O)
I have been using Twitter Bootstrap 2.1 in my latest design. For some reason when I add any div elements to the page all of my content/main body gets pushed really far down and extra space is added all over the page, here is a live example and a picture provided as well:
http://www.japaneselanguagefriend.com/application/home.php
In my CSS in the bootstrap.min.css file I have
body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
position:relative;
}
and for the div
#apDiv1 {
position:relative;
left:439px;
top:669px;
width:300px;
height:670px;
z-index:1;
}
I am trying to get a div to display directly over my main content as shown in the picture, but the spacing and more seems to all get messed up somehow. Any advice or assistance on the problem would be greatly appreciated. Thank you!
UPDATE: So I need to figure out the best way to position my div without affecting my whole layout's spacing. (Thank you Mr.Alien for recommending to adjust the top:size; in my divs style)
I am looking for the best way to position it right in with the orange box in the example picture
You are using top:669px; so cut that down to somewhat top:30px;
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
I would like to style my page so the content is in the middle and has a yellow border on the left, running from the top of the page to the bottom.
Currently I can only get it to go to the bottom using px, or using inherit making it stop until the end of my data. The following code didn't work.
.content{ min-height:100%;}
html{ height:100%;}
The complete code:
html
{
font-family: Segoe UI, Verdana, Sans-Serif;
background-image:url('../Images/tile.jpeg');
}
.content
{
width:700px;
margin:auto;
padding-left:5px;
background-color:White;
}
.button
{
font-family: Segoe UI, Verdana, Sans-Serif;
height: 25px;
width: 160px;
}
How can I get it to run to the bottom of the complete page?
Thanks!
Use a background image for the page, with background positioning
Research "full height css" and take a look at http://peterned.home.xs4all.nl/examples/csslayout1.html
Depending on your desired browser-support, you could always just add min-height:100%; to your content div.
If you don't mind using JavaScript, you could also add a simple snippet to set height:100%; if the height of the content container is less than the height of the window.
JQuery:
$(function(){
if($('#content').height() < $(window).height())
{
$('#content').css('height','100%');
}
});
Demo: http://jsfiddle.net/gBtTf/
Using CSS try this
<style type="text/css">
#blah{
border-left-width:Xpx;
border-left-color:#xxx;
HERE add all the code for
content
}
</style>
where blah is the id of your div, paragraph tag, etc and you'd have to customize the width and color of course.
EDIT the css was edited, try this out, but instead of making a div for your border, add this to the content div, which should have a height of 100% or a min-height of 100%. Let me know how it goes.
There was a forgotten div .. Added the div to the CSS with 100% height and BAM!