Great, thanks.

Yes you can close the thread. Thanks again.

Thanks Ismael, that worked well.

One final question. What would be the best way to reduce the white space between the share box and the gray sponsored by box.

Using a negative margin seems to work:

#sponsor-class {
    margin-top: -10px !important;
}

However I wasn’t sure if using a negative margin is the best way to reduce the white space.

Hi Victoria,

Unfortunately that still did not work correctly as the smaller sized screen widths still displayed a gap between the box and border.

I did some trial and error and came up with this:

.avia-mozilla #sponsor-class {
    display: block;
    width: -moz-available;
}

That seems to work good although I have never used the code -moz-available. Is that okay to use?

As well, from what I understand the -moz-available code is only for Firefox so do I still need to keep it under the .avia-mozilla class selector or can I put it with the rest of the CSS in the ID selector #sponsor-class section? For instance:

#sponsor-class {
    text-align: center;
    font-weight: 300;
    background-color: #7a7874;
    margin: 0px -18px -10px -18px;
border-radius: 0 0 10px 10px;
overflow: auto;
width: -moz-available;
}

• This reply was modified 3 years, 8 months ago by lsrmedia.

Thanks, that worked well. Thanks again for your help.

Thanks for the quick reply. I added the following code:

@media only screen and (max-width: 889px) {
.logo img {
padding: 10px 0px 0px 0px;
}
}

@media only screen and (min-width: 990px) {
.logo img {
padding: 30px 30px 5px 5px;
}
}

@media only screen and (max-width: 989px) {
.responsive .logo img {
max-width: 70%;
max-height: 70%;
}
}

The logo looks good at all sizes now except between 768 px and 989 px. Between that screen width the logo goes very small. Why is the logo going so small and how can it be fixed?

Thanks @guenni007, your help is always welcomed and much appreciated!

@Rikard, yes I followed the directions and it worked perfectly. My site does not have a sidebar so it takes the featured image for the blog post from the entry_without_sidebar as @guenni007 suggested. I verified this by making the height only 100px for the entry_without_sidebar and sure enough, all new blog featured images are only 100px high.

However, this does lead to a few questions:

1) I have been reading about Retina Displays and how their pixel density is double. So if the maximum size that your image can be displayed on your website is 800px wide, you should actually make sure the image is 1600px wide so that it will look good on Retina Displays. The article said you should have your original upload image 1600px wide and then set the wordpress generated large image to 800px wide. Then when your website is displayed, it will pull whatever sized image best fits the space and resolution for the screen size that is being used to view the blog post? They also suggested setting the wordpress generated medium image to 400px wide and this image will be used for mobile phones. But it would appear that the Enfold Theme uses the entry_without_sidebar image regardless of screen size or resolution? Is this assumption correct?

2) If the above assumption is true, then the easy fix is to make the entry_without_sidebar image double the size to ensure it looks good on Retina Screens or Regular Screens. But that seems like a waste of resources since that double sized image will also be used even when viewing the website on a small mobile phone, thereby unnecessarily increasing load time. Is my thinking correct?

So is there a solution to this? Or should I not worry about Retina Displays and just size the image for regular displays.

Worked Perfectly Thanks so much!

I have provided the link to my website. When you go to the website, you will see each blog post has the category in a small black box listed beside the date and time. It will say “in personal” or “in news” or whatever the category is. I would like to remove the word “in” so it just says “personal” or “news”. Thanks

Perfect! I was able to make the required changed. Thanks for your help!

Worked perfectly! Thanks so much.

Sorry about the confusion. The code worked perfectly!

Thanks

That code does not seem to work. If I turn on the breadcrumb in the header layout options, the breadcrumb appears on all pages. If I turn off the breadcrumb in the header layout options, the breadcrumb is not visible on any pages. The code you gave me seems to have no effect in either instance.

Perfect! Thanks so much.

• This reply was modified 9 years, 11 months ago by lsrmedia.

Please disregard as I was able to get the forum working properly on a fresh install.