Authoring

The foundation for any good manual is clear and effective step-by-step documentation. This means that the documentation presented is both easy to understand and develop. Our guide creation tools make it easy to write and edit guides.

15 Questions View all
User avatar

Options

Arranging categories into 2 columns in Responsive view/design

In responsive view, I would like to arrange categories to 2 columns as shown in left image.

Categories on all pages.

For normal sites, it looks 1 column like on the right in image. iFixit accomplished this on the main page but would like for all category navigation.

Appreciate if you can post .Responsive CSS to arrange categories or arrange it like Mobile App view.

Something like this

<if is="@enableResponsive">

@media (max-width:@maxResponsiveNarrowWidth/2)

{

.Responsive .CategoryList

{

text-align: center;

}

}

</if>

Thank you,

Block Image

Answered! View the answer I have this problem too

Is this a good question?

Yes No
Score 0

Comments:

@eric

This is appearing as below and not 2 columns. Thanks a lot for help!

[image|130353]

by

Add a comment

1 Answer

Filter by:
Most Helpful Newest Oldest
Chosen Solution
User avatar

Options

iFixit has a custom html page (in that example screenshot) so it's not a very apples-to-apples comparison. However, you can accomplish your desired look via custom css.

Here's an example of what I got by modifying the existing styles:

Block Image

Updated CSS

@media (max-width: 599px) {
.categoryListCell, .blurbListCell {
    width: 48% !important;
    float: left !important;
    margin-right: 8px !important;
    margin-bottom: 10px !important;
}
}

Was this answer helpful?

Yes No
Score 1

Comments:

This is exactly what I want but I tried cut/paste above css in custom CSS but didn't make any change for me. Do I need to add this in a different place?

I also looked Gunner auto site on my iphone 6+, it still shows one column.

Thanks a lot!

by

@Eric Doster

Can you please help me out here!

----

This is exactly what I want but I tried cut/paste above css in custom CSS but didn't make any change for me. Do I need to add this in a different place?

I also looked Gunner auto site on my iphone 6+, it still shows one column.

Thanks a lot!

by

@bryanwares - I updated the css in my answer post. This will work for your purposes unless you have existing styles that conflict with it.

Let us know if you need any additional help!

by

@eric

Can you please post css to adjust category image height. Currently, the categories are looking narrow in 2 columns but image height is staying same making it look out of proposition. Thanks a lot!

How to adjust height of the

by

@bryanwares - can you link to a screenshot or send me one directly that references what you're seeing? I'd love to help troubleshoot this - but I just need a little bit more to give be a better idea of where you're at and where you'd like to go with the styling here.

by

Add a comment

Add your answer

Author avatar bryan ware will be eternally grateful.
TRUSTe