Docs

[FarBlueIR]

Morning,

I was wondering if someone could please help.

I’m looking to make a slight modification to the ‘Search Results’ page on a website, where the list of search results would be in line with the logo and menu in the navbar.

Kind regards,
Nick

[Christopher]

Hi there,

Please provide us with URL and mockup so we can see what exactly you want to achieve.

Thanks.

[FarBlueIR]

This reply has been marked as private.

[Thai]

Hi There,

Please try with this CSS:

@media (min-width: 980px) {
    .search-results .x-header-landmark.x-container.max.width,
    .search-results .x-container.max.width.main {
        width: 80%;
        max-width: 100%;
    }
}

Hope it helps 🙂

[FarBlueIR]

Hi Thai,

Thanks, I have given that a try and it works – Thanks for your help with that.

Is there a way to make this automatically respond to different screen sizes, or would it be a case of just modifying the top line so that the width changes according to the screen size?

Kind regards,
Nick

[Joao]

Hi Nick,

The code above will work in anything above 980px

If you want to change it you can freely change or repeat it with different screen size, or use min instead of max, to aim what is below.

In case you need help please provide more detailed information in order that we can help you.

Thanks

[FarBlueIR]

Hi Joao,

Many thanks, I’ll repeat and change the different screen sizes.

I have just one final question. Is it possible to change the title ‘Search Results’ size, as well as reduce the gap between this title and the first search result?

Kind regards,
Nick

[Thai]

Hi There,

Please add this CSS:

.search-results .h-landmark {
    font-size: 24px;
}

.search-results .offset.cf {
    margin-top: 0
}

Hope it helps 🙂

[Author]

Posts