Newbie question.
I'm just learning how to create WordPress themes.
Every-time I start a new project, the texts of posts scroll off the screen rather than wrapping to it.
See the picture attached.
enter image description here
I haven't yet added any CSS.
I've added the HTML doc header to the Header file and closed it in the footer file.
Am I missing something here? When I watch tutorial videos everyone else's post/page content is wrapped to the screen with no side-scrolling.
Any help greatly appreciated!
Thanks,
James
You can use main <div>
<div class="container">
// Your Content
</div>
in your <body> and give the CSS of width, padding and margin as your requirement. Like below
CSS
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
i just want to center my menu in my header .
My website : http://test.projekt-tenis.pl/wordpress/
and my header now looks like :
All i want to do is just center my menu it's little too left . How can i center it using only wp-admin and custom.css .
I try to use google edit :
but can't find solution all the time i move all the menu to left cac't just center it. Can enyone help? and i just want to align social icon to right but don't know why i have so much space beetwen them like this :
EDIT 1
I add what you wrote but its looks like the same check it : i just want do delete space beetween facebook icon and linked in icon want the same like next to twitter and linked in.
And as i said i need to center my menu when you open my site you gonna see main menu : Główna , Oferta etc. Is not in the center its little paddig do left i want to center it using custom.css
The HTML is not properly written so there is no proper way (I'm aware of) to centre Navigation by using proper CSS. However, navigation can be centered by adjusting margin/padding but it's Not Recommended
So, you would need to make changes in HTML code: (Recommended)
How:
Create 3 separate div's for (Logo, Nav and Social)
Assign specific width (according to your needs)
Add css property to align left: float: left;
Finally, apply text-align: center; to Navigation
Example:
#container{
width: 100%;
}
#container div{
float: left;
}
#logo, #social{
width: 15%;
}
#nav{
width: 70%;
text-align: center;
}
<div id="container">
<div id="logo">
LOGO
</div>
<div id="nav">
NAVIGATION ITEMS
</div>
<div id="social">
SOCIAL
</div>
</div>
And there is extra padding applied to one of social media icon and you can fix in two different ways:
1. Find below piece of code and change padding-right: 10px to padding-right: 0px
Old: (Currently, look like this)
.primary-menu li:nth-last-child(-n+3) {
float: right;
padding-right: 10px;
}
New: (Should look like)
.primary-menu li:nth-last-child(-n+3) {
float: right;
padding-right: 0px;
}
2. Add below code in custom.css or other styles file.
.primary-menu li:nth-last-child(-n+3) {
padding-right: 0px;
}
NOTE:
First method is the Best and Recommended way
The second method is not recommended. I just mentioned because you looks beginner so maybe you'll have some difficulties in locating original style and in that case, you can try 2nd solution.
I uploaded the WordPress few days ago and found out that the one on local host and the one on the website www.noteid.com are different.
The one on the website has the white-space on the right hand side:
So I did test it with my theme and the one that WP has: Twenty-Fourteen
All the others theme work fine but two of those.
It seem like: html { overflow-x: hidden } work but I want to find what cause the problem. I took 2 days do the research and feel like nothing work out.
Can anyone help me to point out what happening to my website?
Thank in advance.
This is CSS: http://jsfiddle.net/n9zqygcj/
The reason this is happening is that the #footer width is 105% of the page.
You need to change:
#footer {
padding-left:0;
}
#colophon {
margin-left:5%
}
So that the footer isn't longer than it should be.
EDIT:
Here is the updated CSS.
http://jsfiddle.net/n9zqygcj/2/
The <a> tag which is wrapped around the <div id="footer"> should be assigned a class, for e.g. <a href="#" class="footerlink"> and then the following styles should be added to inside your stylesheet:
.footerlink {
display: block;
width: 100%;
overflow: hidden;
}
Apart from this, also add the following style to your stylesheet:
.metaslider {
overflow: hidden;
}
Hopefully this will eliminate the problem of extra white space on the right side which you're facing on your website.
I created an area in my WordPress theme where I can include a widget. Well, I included a social follow widget and I also included a Facebook Follow/Subscribe widget.
The problem is that the Facebook widget appears below the social widget -- and I'd like the social widget to be flush left, and the facebook widget to flush right.
Here is what it looks like on the website:
And here is the "general" Firebug of it:
I have tried to learn CSS, but I still get confused with selectors and the differences between text-align:left or float:left, etc. ... Here is what it looks like when you open up those "asides" in firebug:
I must have tried 30 different types of CSS rules and I cannot get that Facebook Follow widget to show up on the same line as the social widget, flushed right.
I can say that the one thing that I've tried that has worked for me has been this:
#social_sprites_widget-6 .ss {
text-align: left;
}
#social_sprites_widget-6 .widgettitle {
color: white!important;
text-align: left;
}
Lastly, here is what happens when I highlight the two "asides" and right click/copy html (not "inner html", which is similar):
<aside class="widget php-text catalyst-widget-area catalyst_hook_after_header" id="php-
text-13"><div class="widget-wrap"><div class="php-textwidget"><div data-show-faces="false"
data-colorscheme="dark" data-width="200" data-href="https://www.facebook.com/occupyhln.org"
class="fb-follow fb_iframe_widget" fb-xfbml-state="rendered"><span style="vertical-align:
bottom; width: 225px; height: 24px;"><iframe width="200px" scrolling="no" height="1000px"
frameborder="0" name="f28a55d5f531d8" allowtransparency="true" title="fb:follow Facebook Social
Plugin" style="border: medium none; visibility: visible; width: 225px; height: 24px;"
src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F
%2Fwww.facebook.com%2Foccupyhln.org&show_faces=false&width=200&color_scheme=dark&
amp;app_id=499338670149736&locale=en_US&sdk=joey&channel=http%3A%2
%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D26%23cb%3Df2e90aca0c1a8de%26origin%3Dhttp%253A%252F%252Fwww.occupyhln.org%252Ff3e71b0d8eec812%26domain%3Dwww.occupyhln.org%26relation%3Dparent.parent" class=""></iframe></span></div></div></div></aside>
That has gotten the social sprites and title to flush left. But I cannot do anything with the Facebook follow widget. Any help in eliminating this headache ... it's at http://www.occupyhln.org .. would be greatly appreciated!
You have 2 options to accomplish this:
Option 1:
CSS:
#wrap .Social.Sprites{ width:auto; }
#wrap .php-text.catalyst-widget-area{ float:right;width:auto; }
both will be in the same line but you will lose the black background (since the background is part of the social icons widget), you will need to wrap both widgets on a div like this:
<div class="mySocialMediaWidgetArea">
/* social icons widget here*/
/* follow us widget here */
</div>
and add to the CSS .mySocialMediaWidgetArea{background:#000;}
Option 2:
CSS
#wrap .php-text.catalyst-widget-area{
float: right;
width: auto;
margin: -80px 0 0 0;}
the key here its width:auto, you weren't able to use float or text-align to put them in the same line because both widgets have width:100%, i am using classnames instead of ID's since if you delete and create a new widget the ID will change and you will have to update the CSS in that case.
I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">
I have a DIV with a set height and overflow: hidden .
Inside the DIV, there's some content (a P, maybe some IMGs... it's a wordpress post content, by the way).
The content is completely unstyled (no css applied to any of it!)
Now when I remove the height and the overflow: hidden from the DIV css, the whole content will be shown. So far, so good.
But when I set the height and the overflow-property, the content will completely disappear!! Instead of being just "cut off" at the certain height.
The DIV displays properly, but the content then seems to be completely invisible.
:(
Could you please help me if there are any errors / known problems with this method?
My HTML:
<div class="post-text-long">
<?php the_content(); ?> // This displays the post's contents, just to let you know
</div>
The CSS that lets the contents disappear:
.post-text-long {
height: 200px;
overflow: hidden;
}
EDIT: Live example removed, thanks everyone for your help!
Use this instead:
.post-text-long {
height: 210px;
overflow: hidden;
width: 100%;
}
You need to add width to get this code working.
.post-text-long { clear: left; }
The html/css code is ok - http://jsfiddle.net/easwee/gXg5w/4/
You are saying that it's a wordpress content - check if there are unclosed divs or any other elements that might break your design once the content is loaded.
Open your page in firefox - if you have firebug try to delete out all html content and add in some Lorem ipsum text to see the results.
Otherwise provide a live example with problematic content.