Safari Images being stretched full width when displayed on post list

Actually I think you’re in luck. I didn’t see those issues with Safari (vid), so I think the issue is with the Windows Safari. I wouldn’t worry about since no one will be visiting with that.

The logo in Safari is still very small though. That will need to be switched to non-percentage values.

It also looks like CSS for the events category is inadvertently affecting featured images on the Post pages: https://pics.competethemes.com/image/0O2t2M3K2Q2v

This is happening because the “.categories-events-galleries” class is on the Post element as well. You’ll want to use the “.taxonomy-category-events-galleries” class instead and attach it to the “.full-width” class like this:

.full-width.taxonomy-category-events-galleries .featured-image

Hey Ben,

Pesky Safari guess I will have to use a hard coded pixel size for the logo.

I am having trouble fixing the featured image. When I attach the Taxonomy to category-event-galleries it makes the featured images full width in the post list. Not sure If I am putting it in the right place. I assumed I would want to attach the Taxonomy to all my css targeted at making the posts of that taxinomy to display as the default theme in the post list not the full width. My css is as below

.category-events-galleries .entry-content { text-align: center;}
.facebook-album-container { margin-left:5%;}
.home .archive, .category-events-galleries article p:first-child {
  display:none;
}
.singular .singular-post .full-width .featured-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  right: 0;
}
.vertical-align-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
  text-align:center;
}

.vertical-align {
  display: table-cell;
}

.vertical-align--middle {
  vertical-align: middle;
}
.excerpt-content {
  padding-bottom: 0px!Important;
}
.home .archive, .photocrati-nextgen_pro_slideshow {
background-color: white;
left:0;
}
@media all and (min-width: 56.250em) {
 .site-header .site-title { opacity: 1; filter: alpha(opacity=100);}
 .site-header { padding-bottom: 4px;}
 .singular-post  .title-info { float: none!important; position: relative; text-align: center!important;}
 .home .site-title img { max-height: 50%!important; max-width: 50%!important;}
 .site-title img { max-height: 20%; max-width: 20%;}
 .singular-page .site-title .logo img { max-height: 20%!Important; max-width: 20%!Important;}
 .title-info { padding-top: 1%; text-align: center;}
 .menu-primary-items,
.menu-unset { margin: 0 0 0 0;}
 .singular-post .menu-primary, menu.primary-tracks { min-height: 0px;}
 .archive .menu-primary-items { top: 28px; position: relative;}
 .toggled .site-title img { opacity: 0; filter: alpha(opacity=0);}
 .archive-header { padding: 0 0 4px 0;}
 #cboxTitle { visibility: hidden;}
 .home .archive, .full-width .category-events-galleries .excerpt.even .featured-image,
.full-width .category-events-galleries .excerpt.even .featured-video { right: 0;}
 .home .archive, .full-width.taxonomy-category-events-galleries .featured-image { height: 100%; padding-bottom: 0; position: absolute; right: -1px; -webkit-transform: translateZ(0px); transform: translateZ(0px); width: calc(50% + 2px);}
 .home .archive, .full-width #main .category-events-galleries .excerpt-container { padding: 0 5.55%; width: 50%;}
 .home .archive, .full-width.full-post #main .category-events-galleries .excerpt-content { text-align: center; padding-bottom: 24px!Important;}
 .home .archive, .post.category-events-galleries .excerpt-container { min-height: 360px;}}
@media all and (min-device-width : 20em) {
 .title-info { float: none!important;}
 .home .full-width, .site-title { text-align: center; clear: both; margin-top: 20px; margin-bottom: 20px;}
 .site-header .home .site-title img { text-align: center; max-width: 280px; max-height: 280px;}
 .site-header .site-title img { max-width: 200px; max-height: 200px;}
 .site-header .site-title { opacity: 1; filter: alpha(opacity=100);}
 .site-header.toggled .title-info { display: none;}}

I will keep the css live on my site with the changes above so you can see the effects.

I have debugged it a bit more the code inside the

@media all and (min-width: 56.250em) {
.home .archive, .full-width .category-events-galleries .featured-image { height: 100%; padding-bottom: 0; position: absolute; right: -1px; -webkit-transform: translateZ(0px); transform: translateZ(0px); width: calc(50% + 2px);}
}

is overwriting

.singular-post .full-width .featured-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  right: 0;
}

I have tried to move that into the media query but it still has no effect.

Okay I’m seeing the same thing as before at the moment. Here is a vid of what I’m seeing and making a live edit to the event category class: https://pics.competethemes.com/1G243b32103T

Your customer service is amazing! However doing that breaks the post list I have made your change look at the home page now

By doing that the .full-width .featured-image {} css now takes president over the category-event-galleries defined css for featured-image

I’m not sure but it seems like .home .achieve, grouping inside the media query has no effect anymore. Same goes for the .singular-post ?

I’m a bit lost where we are at with the customization right now, so I’m going to provide some more general insight and if it doesn’t help lets get back into specifics.

If there is any CSS that isn’t taking effect, the first thing to check is that it is being added to the page properly. If it is being added, then this means the CSS is being overridden by other CSS. In other words, the selector needs a higher “specificity score”.

You can add an !important tag after a value to greatly increase the specificity score of a selector like this:

p {
  color: #000 !important;
}

Try adding !important tags to any values that aren’t currently affecting the page.

well I figured it out. I ungrouped the .home .archive and used two separate lines with the same styling but targeted more specifically and it did the trick

.home.blog.full-width
.archive.full-width

well done ??