Hello I was trying to edit the css of the twitter timeline widget, I was trying to edit the padding of the .tweet part, I want to use width 100% but make the tweets appear centered, so I made something like
#twitter-widget-0.tweet {
padding: 12px 12px 10px 69px !important;
}
but didn´t work.
The jsfiddle is http://jsfiddle.net/pscxjeem/8/
Thanks in advance.
Try this.
html,body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
.tw-align-center {
padding: 0;
margin: 0;
}
.timeline, #twitter-widget-0, .tw-align-center {
width: 100% !important;
}
#twitter-widget-0.tweet {
padding: 12px 12px 10px 69px !important;
}
Related
enter image description here
LINK: https://gta.stillwaters.io/
Can anyone help me make the entire header area height 45px? That's about 3 times the size of the font and also, decrease the logo height also. The logo and header area seems too long in height. If that entire could be reduced to 45px?
header.hidden-phone {height: 45px;}
Code above doesn't seem to work.
You have a padding on your header, the rendering engine goes outwards. it first renders the inner box with the specified height then it renders a "frame" that contains that box with the width specified on each side.
I recommend you to disable padding on this element. more information at w3 schools box model
and there is another attribute that can help Box-sizing
You have to remove the padding on #sp-header-wrapper in order to get your header to 45px.
So change this:
#sp-header-wrapper {
padding: 20px 0 !important;
}
#sp-header-wrapper {
padding: 10px 0;
}
#sp-header-wrapper {
padding: 10px 0;
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
padding: 0 0 1% 0;
}
To this:
#sp-header-wrapper {padding: 0 !important;}
#sp-header-wrapper {
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
}
Then resize your logo:
div#sp-logo {
height: inherit;
}
div.logo-wrapper {
text-align: left;
height: inherit;
padding: 3px;
}
img.image-logo {
height: 100%;
}
Here is the result:
I'm following a tutorial about responsive design and when trying to set the float property to none for a media query targeting (max-width: 625px) for a section having a class main as in the following rule-sets :
/* Section main */
section.main {
background-color: blue;
width: :100%;
float: none;
text-align: left;
}
section.main aside div.content {
background-color: green;
margin: 8px 20px 8px 0;
padding: 5px 0px 10px 85px;
background-size: 50px 50px;
background-position: 20px 5px;
}
Here is the full html and css code all together: jsfiddle (I added colors of blue to the section.main and the green color to the section.main aside div.content in these same media query rule-sets to make sure they do have effect on the html and to make it easy to be located in the page.
These three green divs are supposed to be stacked vertically when the float is set to none.
here: JSfiddle i've edited your fiddle and came up with this. hope this sample helps.
section.main aside {
float: none;
display: block;
width: 100%;
}
section.main aside div.content {
background-color: green;
margin: 8px 20px 8px 20px;
padding:20px 15px;
text-align: center;
background-size: 50px 50px;
background-position: 20px 5px;
}
My issue is that I made a pretty big html page oriented on 125% browser zoom,
however when I put it in 100% all the position's and margin's start to change, thus breaking my html page awfully.
html { width: 100%; height: 280%; margin: 0; padding: 0; }
body { margin: 0 ; padding: 0; background: url(Photoshop/img/header_bg.png),url(Photoshop/img/full_bg.png); background-size: 1600px 655px,cover; background-repeat: no-repeat, no-repeat; }
header h1 { float: left; margin: 28px 0 0 220px; }
nav ul { list-style-type: none; float: right; }
nav li { float: right; margin: 53px 20px 50px 0px; text-transform: uppercase; }
What is the best way to fix the problem, without change every single piece of css code( margins position top right, e.t.c).
I have notoced you are using fixed values in your margins.
Try to use presentage, if that dont work use the #media in css to handle different sizes.
Margin example - margin-top: 10%;
Good afternoon,
I am looking to do two things: 1) increase the padding above my menu. 2) center my menu on the page.
Unfortunately I am a beginner and don't know the code required to perform these functions. Any help would be greatly appreciated.
Screenshot:
https://flic.kr/p/omS63R
Webpage:http://visualicreative.com/employee-of-the-month-videos/
Here are the additional pieces of code that I currently use on this template:
#thumbnails .controls { display: none !important; }
.page-template-template-fullsize-php #main {
max-width: none !important;
}
#primary { box-shadow: none; border: 0 none; }
.page-template-template-fullsize-php #main { margin-top: 0; }
.page-template-template-fullsize-php #header { margin-bottom: 0; }
#welcomeTeaser { text-transform: none !important; }
.page-template-template-fullsize-php #content .entry-header {
display:none;
}
.page-template-template-fullsize-php #content {
padding: 0px 30px 30px 30px;
}
#main {padding-top:50px !important;
}
Very much appreciated!
Looks like your #mega-main-menu > .menu_holder needs more padding, try this for CSS:
#mega_main_menu > .menu_holder {
padding-top: 20px;
}
As far as centering your menu, you need to change the .not-fixed #site-title, .not-fixed #navigation:
.not-fixed #site-title, .not-fixed #navigation {
margin: 0 auto;
max-width: 900px;
}
Set max-width to anything you like.
I am working on a website now and I have just started with the header. But for some odd reason it gives 28px margin on top. When I inspect, it says it's because of this:
media="screen"
html {
margin-top: 28px !important;
}
HTML
<header>
<div id='header_container'>
<h1><?php bloginfo('name'); ?></h1>
<?php wp_nav_menu( array("theme_location"=>"main") ); ?>
</div>
</header>
This is all my css
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 960px;
}
header {
width: 100%;
height: 81px;
background-color: grey;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div#header_container {
width: 960px;
margin: 0 auto;
}
div#header_container>h1 {
margin: 0 auto;
}
div#header_container>h1 {
font-family: arial;
font-size: 14px;
}
div#header_container>h1 a {
background-image: url(images/logo.svg);
width: 272px;
height: 19px;
display: block;
text-indent: -9999px;
float: left;
}
/* menu thing */
ul#menu-main-menu {
list-style-type: none;
}
ul#menu-main-menu>li {
margin: 0;
padding: 0;
}
ul#menu-main-menu>li>a {
display:block;
float: left;
padding: 10px;
margin: 0 5px 0 0;
text-decoration: none;
}
I can't find the margin, can you? I am confused where it comes from.
I found the answer:
If it's acting up on your site, open your user profile (Users > Your Profile) and uncheck the 'Show on Front' option to make it disappear.
But thanks for your help guys!
Cheers
I think you are using wordpress, that's something related to the admin top bar which can be disabled by plugins but the css rule remained enabled.
CSS rules marked !important take precedence over later rules.
To fix this issue you may add in your css file the following code at the top and at the bottom. But you must put !important so it will override the previous rule. Or, you can add inline style in the html tag.
html {
margin-top: 0px !important;
}