So I'm currently working on a responsive site and i'm trying to set the styles in the media query. However, the styling in the parent css is conflicting.
The parent style sheet holds this:
.sec1 p {
text-align: left;
width: 55%;
margin-left: 8%;
float:left;
margin-top: 100px;
}
And the code for the 768 width:
.sec1 p {
letter-spacing:normal;
word-spacing:normal;
font-size: 1.1em;
width:none!important;
margin-left:none!important;
margin-top:none!important;
text-align:inherit!important;
}
As you can see, i tried to set a width:none; margin-left: none;
But I don't even know if that's proper or effective,
In short, as you can see by my blaring code what I don't want, how do I do this?
Hopefully I am being clear, thanks!!
Width none is not valid.
Set width: auto to revert the item to the default behavior
or width:0 to set it to 0-width.
Also, for !important you need a space between the end of the property value and important, like this:
margin-left: 0 !important;
Related
I'm new to Wordpress and having a hard time making it do what I want. I'm using the twenty-seventeen theme and it puts too much vertical space around the home page content. You can see what I mean here: www.tekknow.net
If I press F12 in the chrome browser and look at the elements containing the content, it goes from outer to inner tags like this:
class = "site-content-contain"
id="content" class = "site-content"
id="primary" class = "content-area"
id="main" class = "site-main"
id="post-30" class = "twentyseventeen-panel post-30 page type-page status-publish hentry"
class="panel-content"
class="wrap"
The inner most one is #7 so I've put that into the customizing additional css section like this:
.wrap {
margin: 0px;
border: 0px;
padding-top: 0px;
}
When I float my cursor over the wrap class in the chrome elements, I still see a lot of green padding above the text "HOME PAGE", yet I have set padding-top to 0. I've also verified that there is 0 border, margin, and padding in items 1-6. Suggestions?
If you wanted to remove the padding from the top then you will need to edit these CSS rules:
.panel-content .wrap {
padding-bottom: 0.5em;
padding-top: 1.75em;
}
#media screen and (min-width: 30em)
.panel-content .wrap {
padding-bottom: 2em;
padding-top: 3.5em;
}
#media screen and (min-width: 48em)
.panel-content .wrap {
padding-bottom: 4.5em;
padding-top: 6em;
}
You can also see that there is different styling for different screen sizes.
You could eventually add !important to:
.wrap {
margin: 0px;
border: 0px;
padding-top: 0px !important;
}
Hope it helps.
I´ll suggest you to write a new CSS file and save it under style.css
Presently, the .wrap class has a style of
padding-bottom: 4.5em;
padding-top: 6em;
which is saved under http://tekknow.net/wp-content/themes/twentyseventeen/style.css?ver=20190507
So, just write a new CSS file or edit the .wrap class files from there.
All the best!
I don't have any experience with html or css, I recently started my blog: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html
But you can see there's so much white space on the left, how do I reduce this? I tried googling some stuff about editing the html or adding a css code, but none of it worked.
This is the css I tried, and it didn't look like it changed anythin
.content-outer {
margin-left: 10px;
}
change the .centered-bottom and post-sidebar class width.
.centered-bottom, .centered-top {
width: 90%; /*change this */
}
if you don't want to have padding for .post-sidebar u can remove it.
.post-sidebar {
box-sizing: border-box;
display: block;
font: normal 400 14px Montserrat, sans-serif;
padding-right: 20px; /*Remove this if u don't want to have padding */
width: 70px; /*change this */
}
Final output:
It looks like sidebar (.post-sidebbar) is causing the main content to shift to the right. If it works, you can position it elsewhere so that your content gets more space.
OR
You can override the css of .centered-bottom, and add margin-left: 100px (Change the number as per your need) to it.
While I was writing a css for a website, I found that some portions of my css did not work as intended. What happened was that within a selector with the highest specificity, when I tried to adjust the width or margins of an element, it did not change. However, within the same selector, other properties could be adjusted without problem.
e.g.:- take this selector
.get-touch {
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
This is applied to a button, and I wanted to increase its width.
Even if I change the width to 500px, the width will not change whatsoever. However. any modifications to other properties will be reflected on the browser.
Here, I have attached the file to my particular css file which brings the problem:- https://drive.google.com/open?id=0B1CjX_FVqdRjWGRkS3NLOG9tTEE
How can this occur, and what can I do to prevent such problems?
.get-touch {
display: inline-block; /* Add this */
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
As you have mentioned that the button size is not changing even after giving it width, it means you are applying your CSS on an inline element and thus the browser can't render its box-model.
Adding a display:inline-block property will make it work.
I have a problem with the fact that, when I try to print a page, every link gets the URL between () behind it. I have found multiple questions here, and the solutions work. I have one other problem, on top of that, though: My styles in print.css seem to be ignored after adding a solution.
My CSS
.header-breadcrumb {
margin-top: 0 !important;
}
.nonPrint, hr, .shows-more, #videoGallery{
display: none;
}
.single-event .container .col-md-9 {
width: 70%;
float: left;
}
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
.single-calendar .table-responsive table tbody tr td {
padding: 2px 5px;
}
.single-description {
font-size: 10pt !important;
}
h1 {
font-size: 12pt !important;
}
.printLogo {
display: block !important;
width: 200px;
padding-left: 10px;
}
But when I add
a:after {
display: none;
content: "";
}
the font-sizes get ignored and jumps back to their original values (or so it seems). How do I fix this?
On the left you see the file as it should look like (including a link in the sidebar on the right, which has to be removed), and on the right you see the file with the href removed, but where the all new styles in print.css seem to be ignored.
Disregard what I said before. The difference in styling came from the following:
Because of this CSS, the sidebar has to fill 30%:
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
But since it output a URL which could not be broken until the first -, being 30% wide meant resizing the font (which Chrome did automatically). Hiding the URL made it possible to actually apply the font-size I tried to apply through the CSS, making everything bigger than in the original file, where it actually DIDN'T listen to the CSS.
Facepalm
This might be useful in the future for 2 other people, so I'll leave the question here.
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.