Need Help on Product Titles

New Member
12 0 0

Hello! I need help with my Shopify Product Titles. Since some of them are very long, if you use a smaller screen it bunches up (see attached photo). Is there any way I can make Titles two lines so this doesn't occur?

Screen Shot 2019-10-16 at 2.18.25 PM.png

0 Likes

Hello 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
12 0 0

Hello,

Please add below css in your scss file

.@media only screen and (min-width: 768px) {
widget-title fieldset.box-title legend {
	line-height: 65px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
12 0 0

Hello - could you explain a little further? Under what template or asset am I supposed to put this under?

 

Thank you!

0 Likes
Highlighted
New Member
12 0 0

Does it go below the last one @media section?

 

/* width: 1200px */
@media (min-width: 1200px) {
.header-bottom.on .header-panel-top { right: 0px; }

.banner { width: 100%; }

.quickview-template .content,
.quick-view .content { width: 1038px; }

.products-grid > .col { width: 20%; }

.slide-des { left: 10%; right: 10%; width: auto; }
.main-slideshow { width: 100%; margin: 0; }
.main-slideshow .flex-direction-nav a.flex-prev { left: 5%; }
.main-slideshow .flex-direction-nav a.flex-next { right: 5%; }

}

@media (max-width: 1199px) {
.main-slideshow .flexslider .slides > li.video { position: relative; width: 100%; padding-top: 50%; }
.main-slideshow .flexslider .slides > li iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
}

@media (max-width: 1034px) {
.grid-item .hover { display: none;}
.products-grid .wishlist { display: none; }
.quick-view { display: none!important; }
.products-grid .spr-badge { position: static; opacity: 1; filter: alpha(opacity=100); }
.products-grid .grid-item .product-top { position: static; }
.quickview-button { visibility: hidden; display: none; }

/* product */
.products-grid .grid-item { padding-bottom: 50px; }
.list-category .view { display: none; }
.recently-viewed-products .product-bottom .action,
.products-grid .product-des { opacity: 1; filter: alpha(opacity=100); bottom: 0; }
.recently-viewed-products .product-bottom .action { position: static; }

.products-grid .owl-item .grid-item { padding-bottom: 50px; }
}

/* width: 970px */
@media (min-width: 992px) and (max-width: 1199px) {
.banner .container { margin-left: -495px; }
.banner .inner { width: 400px; }

.header-bottom.on .header-panel-top { right: 0px; }
.header-bottom.on .site-nav > li > a { margin-left: 15px; margin-right: 15px; font-size: 11px; }

.newsletter .input-group-field { width: 245px; }

.toolbar .btn-group { margin-left: 15px; }

.product-img-box.has-jcarousel .product-photo-container { width: 80%; }
.more-view-wrapper .jcarousel-clip-vertical { height: auto; }

.quick-view .product-img-box.has-jcarousel .product-photo-container { width: 230px; }
}

/* width: 750px */
@media (min-width: 768px) and (max-width: 991px) {
.banner .container { margin-left: -375px; }
.banner .inner { width: 320px; }

.header-bottom.on .header-panel-top { right: 0px; }
.header-bottom.on .site-nav { padding-right: 0px; }
.header-bottom .nav-search .icon-search { width: 50px; }
.nav-bar .header-logo-fix { margin-left: 10px; margin-right: 10px; }
.site-nav > li > a { margin-left: 12px; margin-right: 12px; }
.header-bottom.on .site-nav > li > a { margin-left: 7px; margin-right: 7px; font-size: 10px; }
.header-bottom.on .top-cart a span.first { width: 50px; background-position: -29px -110px; }
.header-bottom.on .top-cart a #cartCount { right: 10px; }

.slide-heading { padding: 0 0 5px; }
.slide-des p.line { display: none; }
.slide-text { padding-bottom: 10px; line-height: 1.35; }

.collection-title h3.h5 { font-size: 18px; }

#email-modal .modal-window { width: 705px; }
#email-modal .window-window .window-content .left { width: 425px; padding: 40px 10px 30px 20px; }
#email-modal .window-window .window-content .right { width: 280px; }

.slide-des { bottom: 60px!important; }
.banner p { margin-bottom: 20px; }
.newsletter .input-group-field { width: 100%; }
.widget-featured-product .products-grid .grid-item { width: 150px; }
.widget-featured-product .btn { padding: 0 5px; }

.sidebar-custom ul li { width: 100%; }
.refined-widgets > a { float: left; }

.toolbar .view-mode label { display: none; }
.toolbar .view-mode { margin: 16px 8px 16px 16px; }

0 Likes

Add this css at bottom
Online Store-> Themes -> Edit code->Assets->theme-styles.css

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
12 0 0

Hello - thanks for your advice. This did not work when I put it directly at the bottom of that page.

 

0 Likes