You could adjust the font-size of the left menu at specific viewport widths, this would give your menu more room to breathe, like so:
@media screen and (min-width:720px) and (max-width: 980px) {
.prod-cat-sidebar-cat-title h3 {
font-size: 16px;
}
}
If you want the smaller font size to take effect on mobile viewports too then simply remove (min-width:720px) and from the above code.
You can also centralize your product images with this:
.upcp-thumb-image-div a {
display: inline-block;
}
You can add custom CSS code to your Child Theme style.css file, or via the use of a Custom CSS plugin.
Let me know if that helps.
-
This reply was modified 9 years, 5 months ago by
ThemeSumo. Reason: More information
Hi Achait,
I just wanted to mention that since the CSS from ThemeSumo relates to UPCP styles, you can add it to the Custom CSS box in the Edit Catalogue page.
Thank you. The fixed my tablet issue.
The inline-block seems to center the images vertically but not horizontally in the page. any other ideas?
Try this for your images:
.upcp-thumb-image-div {
margin: 0 auto;
}
Thank you so much. that’s exactly what i was looking for.
unrelated to UPCP, but when the screen resolution gets to 991px the menu items go into a menu button. do you know how to change at what resolution it does this? I want it to be at 1200px instead.
You can add this:
@media screen and (max-width: 1200px) {
/* original menu */
nav.main-nav .container {
display:none;
}
.slicknav_menu {
display: block;
}
.slicknav_arrow {
display: none;
}
ul.slicknav_nav a {
color: #2c2c2c;
background: none !important;
}
ul.slicknav_nav a:focus {
outline: none;
}
ul.slicknav_nav > li,
ul.slicknav_nav > li > ul > li {
width: 100%;
}
ul.slicknav_nav li ul li a:hover {
color: #fff;
}
ul.slicknav_nav > li > a {
text-decoration: none;
font-weight: 100;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
ul.slicknav_nav > li > ul,
ul.slicknav_nav > li > ul > li > ul {
position: relative;
top: 0;
box-shadow: none;
left: auto;
}
ul.slicknav_nav > li > ul > li:hover > ul {
left: auto;
}
ul.slicknav_nav > li > ul > li a {
text-transform: capitalize;
letter-spacing: 0;
margin-right: 0px;
font-size: 12px;
}
}
