Woocommerce/WordPress Custom CSS for Media

Hello,

On my website the website works perfectly on a desktop computer and on a phone (mobile). But if you turn your phone sideways or try to load my website on an iPad or tablet, it does not format properly. I’ll attach my Custom CSS code here. Can anyone please help me and tell me eactly what code to add to fix this problem? Thanks so much in advance!!!

@media screen and (min-width:490px){
.pshide{ display:none;} }
.style-grid3 .name {
border-right: none;}
.home .row.container {
    margin-bottom: 0px !important;
    margin-top: 10px !important;
}
table {
    margin-bottom: 0;
}
.large-block-grid-5>li, .large-block-grid-5>div>div>li {
    width: 20% !important;
    padding: 0 0.425em 0em !important;
}
.large-block-grid-2>li, .large-block-grid-2>div>div>li{
width: 50% !important;
padding: 0 0.425em 0em !important;
}
#srchnav {
    display: none !important;
}
.home .row.container .large-4 {
width:39.33333%;
padding-right: 4px;
}
.home .row.container .large-8 {
    width: 60.66667%;
}
.home .breadcrumb-row { display:none; }
#top-bar .left-text {
    font-size: 100%;
}
@media screen and (max-width:780px){
#masthead {
    height: 40px !important;
background-color: #f2f2f2;
}
#masthead #logo a img {
    margin-top: -60px;
}
#masthead .mobile-menu a{
    margin-top: -50px;}
.mobile-sidebar {
    padding: 50px 0 100px;
}
.large-block-grid-5>li:nth-of-type(5n+1), .large-block-grid-5>div>div>li:nth-of-type(5n+1) {
    clear: both;
}
.row.container>.columns {
    margin-bottom: 0;
}
.callout.large .inner .inner-text, .callout .inner .inner-text, .callout { display:none; }
form{
margin-top: 0 !important;
}
}

@media screen and (max-width:480px){
.small-block-grid-2>li:nth-of-type(2n+1), .small-block-grid-2>div>div>li:nth-of-type(2n+1), .small-block-grid-2>li:nth-of-type(n), .small-block-grid-2>div>div>li:nth-of-type(n) {
    clear: right;
}
.product-small .name {
font-size:8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-small {
 text-overflow: ellipsis;
overflow:hidden;
}
.home .row.container {
    margin-bottom: 0px !important;
}
.large-block-grid-5>li, .large-block-grid-5>div>div>li, .large-block-grid-5>li, .large-block-grid-5>div>div>li {
    padding: 0 0.225em 0em !important; }
.product-small .yith-wcwl-add-to-wishlist{ display:none; }
}

• This topic was modified 8 years, 9 months ago by Jan Dembowski.
• This topic was modified 8 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress as this is not an Everything else WordPress topic

The page I need help with: [log in to see the link]