Blog style issues: remove breadcrumbs and feature image border on mobile

Support
#1

Hi There,

I have removed the border of the blog feature image on desktop view but it is still there on mobile, can you tell me how to remove it.

Also, Ive tried to remove breadcrumbs from blog pages but its not working.

My site is www.joannebyrne.ie

Thanks,
Joanne

Here is the css I added:

}
.blog .x-breadcrumb-wrap {
    display: none !important;
}
.blog .entry-title::before {
    display: none;
}
.single-post .entry-title::before {
    display: none;
}
.site { background-color: rgb(246, 246, 246); 
} 
.entry-thumb:before {
    display: none;
}
@media (min-width: 980px){
    .single-post .x-container.max.width.offset {
        width: 60%;
        max-width: 60%;
      margin-left: 70px;
    }
.blog .entry-featured {
    border: 0;
    padding: 0;
}
.single-post .entry-featured {
    border: 0;
    padding: 0;
}
}
#2

Hi Joanne,

Thank you for writing in, you can turn Off the Breadcrumbs under Theme Options > Header > Breadcrumbs

There is a typo on your custom CSS, please check all your custom CSS here and address all found errors.

Your custom CSS might have been included inside a certain @media query block because you did not close it (missing } bracket).

Hope it helps,
Cheers!

#3

Thanks Friech,

I have removed the breadcrumbs.

Can you tell me how to remove the feature image border in a way that it wont re appear when displayed on mobile?

Thanks,
Joanne

#4

Hello Joanne,

I have inspected your code and I can see that you added this code:

@media (min-width:980px){
    .single-post .x-container.max.width.offset{
        width:60%;
        max-width:60%;
        margin-left:70px;
    }
    .blog .entry-featured{
        border:0;
        padding:0;
    }
    .single-post .entry-featured{
        border:0;
        padding:0;
    }
}

This code block removed the border of the featured image when the screen is at least 980 pixels or larger:

.single-post .entry-featured{
        border:0;
        padding:0;
}

If you want this to be applied in all of the screen sizes, you will simply move this block outside of the @media block. The newly updated code would be this:

    .single-post .entry-featured{
        border:0;
        padding:0;
    }

@media (min-width:980px){
    .single-post .x-container.max.width.offset{
        width:60%;
        max-width:60%;
        margin-left:70px;
    }
    .blog .entry-featured{
        border:0;
        padding:0;
    }
}

To get familiar with the @media css, please check this out:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.