[Résolu] Search results grid styling question

[Auteur]

Publications

[CharlesB2907]

Hi,

I have a styling problem and I know that is beyond your scope but I am hoping the someone might be able to identify a clue to a CSS fix for how the following script commands a 4 column grid to adjust to a single column on small devices. The problem is, the single column on tablet portrait view is correct but when the tablet is turned landscape, the display should adjust to 2 columns.

I would be grateful for ANY information on this. Thank you.

The CSS currently in use for the responsive 4 column grid display:

table {
width: 100%;
border-collapse: collapse;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, table thead, table tbody, table th, table td, table tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
width: 100%;
}
}

ul{
display: inline-block;

}

ul li{
display: inline;

list-style-type: none;

}

ul {
display: inline-block;
}

ul a {
color: black;
float: left;
padding: 8px 14px;
text-decoration: none;
}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container .wpv_page_current.wpv-pagination-nav-links-item-current {

background-color: #b7b7b7;

color: white;

}

}

ul a:hover:not(.active) {background-color: #ddd;}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container {

display: block;

}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li {

display: inline-block;

overflow: hidden;

text-align: left;

}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li a {

float: none;

padding: 6px 8px;

}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li span {

float: none;

padding: 6px 6px;

}

ul.pagination {

display: block;

overflow: hidden;

padding: 0px;

}

ul.pagination li.page-item {

float: left;

width: 50%;

}

ul.pagination li.page-item span,

ul.pagination li.page-item a {

padding: 8px 12px;

display: block;

float: none;

}

ul.pagination li.page-item .wpv-filter-previous-link {

text-align: left;

}

ul.pagination li.page-item .wpv-filter-next-link {

text-align: right;

}

.show-on-mobile {

display: none !important;

}

@media only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px) {

.hide-on-mobile {

display: none !important;

}

.show-on-mobile {

display: block !important;

}

}

[Luo Yang]

Hello,

Your CSS codes are based on media queries, I suggest you follow document to setup custom CSS codes for "tablet is turned landscape":
lien caché

For example this thread:
https://stackoverflow.com/questions/14209921/media-query-for-ipad-landscape-applied-to-samsung-galaxy-tab-2-landscape-as

[CharlesB2907]

Hi Luo,

Thank you for this information. I'm trying to improve my CSS skills but I'm not learning quick enough.

I know this request is off scope but for a quick fix until I can do more, is there a way to disable the single column on table landscape in the script above, so the default 4 column table will display on the landscape view?

[Luo Yang]

For example, on table landscape in the max-device-width value is 1024px, so you can disable your custom CSS codes for 1024px width device, like this:
Edit this line from:

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

To:

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 992px) {

More help:
lien caché
section "Typical Device Breakpoints":

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

See screenshot: 1024.JPG