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!
Related
I added Bootstrap to my project, but it seems like the headings sizes are fixed and can't be changed. I'm trying to change the font size of my project, as my h1 and h2 text looks really big on mobile devices. For some reason, when I change the font-size of h1 and h2 tags, it seems to be ignored, and when I inspect it, they have lines through the code that adjust the font-size. I tried adding media queries too, but it is not working.
Code:
h1{
font-size: 15px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #E85A4F;
}
h2{
font-size: 17.5px;
}
p{
font-size: 15px;
}
#media only screen and (min-width: 576px){
h1 {
font-size: 20px;
padding-top: 25px;
}
}
The odd thing is when I adjust the paragraph font-size, it works fine. Is there a way I can adjust the heading font size in the same way?
The lines through the code mean, that the style is overwritten.
This image shows the font size of the h1 of the code below. As you can see, there are multiple styles for h1. The one that is displayed at the top in the style panel (image above) gets applied. (This is the selector with the highest specifity, if there are multiple ones with the same specifity the last of the last stylesheet gets applied). On the right side you can see the file and the line where the style is applied.
To solve your problem you can:
Remove the code in the file and the line that is overwriting your headline style
Use a selector with a higher specificity, in this case for example h1.headline.
Add important to your style (font-size: 30px!important;), Note that this is the easiest but dirtiest solution
h1{
font-size: 30px;
}
#media only screen and (min-width: 800px){
h1{
font-size: 20px;
}
}
/*
a lot more css
*/
h1{
font-size: 35px;
}
<div>
<h1 class="headline">Test</h1>
</div>
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.
I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
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.
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;