Margins on Category Archive and Search Results on Safari

Support
#1

Hi,

I am using my portfolio as a blog. I have inserted the code below to make the page margins on my Category Archive and Search Results pages match the blog page. This almost works on Chrome, but when I view the pages on Safari and stretch the window above 1700px, the margins all messed up (please see image). They are slightly less messed up on Chrome with larger windows, but still not perfect. Any idea how I can make these pages’ margins consistent with the entire site on both Safari and Chrome? Thanks!

/* search borders */
.search-results .x-portfolio{
border-bottom: 2px solid #ddd;
margin: 0 3% 0 3% !important;
}


.archive .x-iso-container{
margin: 0 3%;
}

There is a also lot more custom code effecting these pages…

#2

I was able to fix some of the issues by adding the following code:

/* Search Reults Page margins*/
.search-results  .x-container.max.width.offset {    
max-width: 89%;
width: 89%;
}

.archive .x-container.max.width.offset {    
max-width: 89%;
width: 89%;
}

However, now the page titles are not moving with the rest of the page when the window is sized larger. Any idea how I can fix this? Thanks!

#3

Hi,

Kindly change your code to this.

/* Search Results Page margins*/
.search-results  .x-container.max.width.offset,
.search-results   .x-header-landmark.x-container.max.width {    
    max-width: 89%;
    width: 89%;
}

.archive .x-container.max.width.offset,
.archive .x-header-landmark.x-container.max.width {    
    max-width: 89%;
    width: 89%;
}

Hope that helps

#4

Thank you so much! That worked for archive and search results, but didn’t fix the title on the index page. I added the code below, but the “Blog” title is still indented…

.page-template-template-layout-portfolio .x-container.max.width.offset,
.page-template-template-layout-portfolio .x-header-landmark.x-container.max.width {    
max-width: 89%;
width: 89%;
}

One more issue: I just realized that the search results page isn’t linking to the portfolio items. None of the image, “Read More”, or title links are working. Any idea what’s wrong? Thanks again!

#5

Hi There,

This is how the blog looks on my end, please send us with your screenshots how it should be:


Please find and remove this custom CSS:

.search-results .x-main.left {
    z-index: -100 !important;
}

Let us know how it goes!

#6

Thanks so much. That is how it supposed to look, however, when i stretch the window on safari, the title becomes indented (please see picture below). Thanks!

#7

Hi There,

I was able to see that issue too, please also add this custom CSS:

body.page-template-template-layout-portfolio .x-section .x-container.width {
    max-width: 100%;
}

Regards!

#8

That worked. Thanks so much!

#9

Glad we were able to help :slight_smile:

#10

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