I'm using Wordpress theme Canvas by Woothemes. I'm trying to center the site description text underneath the logo. Here is the site: http://barkhascustomsourcing.com
Here is the current CSS I am using. It's not responsive, I know, but I need to re-write so it is.
#logo .site-description {
display: inline-block !important;
line-height: 25px;
margin-left: -330px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 1000px;
}
Any suggestions?
To make this properly responsive you will have to do a lot more than only adjust this class. Heres how you can implement it for your header section:
#logo { width: 100%; }
#logo > a {
width: 100%;
max-width: 350px;
margin: 0px auto;
display: block;
}
#logo > span.site-description {
width: 100%;
max-width: 1000px;
margin: 0px auto;
display: block !important;
}
By making the outer and inner box following the full width but constraining them with max-width will make them responsive.
Now, this is only a small part of your site. I'm not doing the entire thing for you here, but you get the general gist. It also requires you to look at almost any elements, as resizing will require you to make elements that take up a natural; height and expand as their width decreases. So actually, you cannot use any pixel based widths or heights anywhere, only max-widths and max-heights.
PS: Next time you ask a question, please include what you have tried yourself. Show us that you are not outsourcing your work to us :)
Following things you need to update.
#logo {
margin: 0px auto;
width: 100%;
text-align: center;
}
#logo .site-description {
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 100%;
display: block !important;
}
Related
So I'm new to HTML, CSS, and the whole web development scene so I decided to learn by altering existing pages. The bellow is a template that I have altered to my needs to allow for my CMS. The problem is, is that the content moves every now and then to the most unliked position.
I believe that there is something wrong with my CSS that is causing this problem.
Upon inspection of the footer and site_content divs, I have found pretty much no differences. But I don't know why it doesn't ALWAYS show up like this:
The CSS is too large to put on here but the whole source can be found on GitHub under OrangeCider. However I am putting in the (what I think is) relevant pieces of code:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
UPDATE: So it seems that if I remove the overflow: hidden; from the #site_content, the content shows how it should, except there is text overlapping with the sidebar ontop of the footer. Could it be things with the overflow?
It looks like you may have some conflicting CSS rules here. One thing you can try is the !important keyword.
#main, #logo, #menubar, #site_content, #footer {
margin: 0 auto !important;
}
Also, just to make sure that float: left isn't interfering with your styles, put clear: both on the #site_content.
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
clear:both;
width: 837px;
overflow: hidden;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
try this css
Hey, you need to be sure the center block has block display and clear: both.
So you should update your CSS due to this one:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
That's it. Have fun!
I've got a page, with three sections. Each section is an that takes the entire view of the page. I would like the article and background to fit within the mobile device screen, as it does on a desktop, but can't figure out how to get the article to adjust. Here's a fiddle: http://jsfiddle.net/kRjUn/
Here's the CSS:
html {
height: 100%;
}
body {
font-size: 1em;
line-height: 1.4;
height: 100%;
}
article {
height: 100%;
padding-top: 2em;
}
.wrapper {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: inherit;
}
.content {
margin-top: 25em;
height: inherit;
}
I found this gridless boilerplate, and set the body height to 100% and it seemed to work great. I also just used a div instead of article. Anyone looking for a clean and responsive boilerplate I would def. give this one a shot: https://github.com/thatcoolguy/gridless-boilerplate
What i feel that you code is not handling case for each devices, you need to use CSS 3 media query feature which can help you.
I think you can use HTML5 boilerplate template as example.
Here you go, use display tables.
article {
height: 100%;
padding-top: 2em;
display: table;
}
.wrapper.content {
padding: 2em;
display: table-cell;
}
DEMO
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!