Blog not spanning across entire screen, how to delete categories above titles…

Sorry, forgot one more:

How can I change the text color of the date showing above posts?

Thank you for the help!

Hi there,
add this

@media (min-width:991px) {
    .container {
        width: 80%;
    }
}
.entry-meta-top {
    display: none;
}
.widget_ci-socials i {
    font-size: 32px;
    color: red;
}
.entry-date{
    color:green;   
}
.entry-utils .read-more{
    border:2px solid red;
}
.widget_search h3{
    display:none;
}

in your custom CSS box under Appearance->Customize->Additional CSS.
Change with the colors of your preference.

• This reply was modified 7 years, 5 months ago by Fotis.

I’ve applied the codes and there are a couple issues:

1. The search widget title disappeared instead of the text inside the search bar itself.

2. When I change my screen width, the sidebar stretches and cuts off part of my title line on one side. How can I adjust only sidebar size to make it more narrow?

3. I was adjusting widget title size in the editor section and now my mobile version looks like none of the changes made in the custom css plugin is being applied. I only changed font size and ended up changing it right back, so I’m not sure what went wrong. Desktop is fine though.

Thank you for the help!

Hi there,
My bad I misunderstood. Please remove this

.widget_search h3{
    display:none;
}

from your custom css.

1. Add this to hide the search text

.widget_search input::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    .widget_search input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent;
    }
    .widget_search input::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent;
    }
    .widget_search input::-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent;
    }

in your custom CSS box.

2. You will need to open index.php, single.php and page.php and change
col-md-8 to col-md-9 and col-md-4 to col-md-3
3. You have all your widget styling code inside this

@media(min-width:991px) {

}

Which disables the changes in smaller widths than 991px.

So remove the above from your custom CSS code.

Let me know if this helps

Yay it all worked!
The only thing is that now the site appears more narrow on mobile, which I actually prefer, but the header looks very small. Can I enlarge just the blog title header on mobile?

Thanks again!

Hi there,
it will be better to add this

@media (max-width: 767px) {
    .container {
        width: 100%;
    }
#site-content{
    padding:0 30px;
}
}

in your custom CSS box.

Do I add that and delete another code?

I tried to just add it and it made the content even more narrow on mobile, while leaving the header the same size.

On desktop, this code removed all of my custom css changes.

How can I get container width at 100% just on mobile and keep desktop at 70%, where things still look proportionate?

Thank you and sorry to be a pain!

Hi there,
nope just add this after all you custom CSS. A syntax Error will cause all other css to stop functioning.

The above code will affect only mobile devices, so desktop should remain wide (80% in width)

Spot on… It worked when I added it after all the css.

Thanks Fotis!

Glad I could help!