Dear experts,
can I ask you how to make my product image smaller on mobile?
I would like to have add to cart visible from first page on mobile phone.
Thanks a lot for any advice.
Petr
Hi, I can copy paste some stuff but not more experienced than that 
go to your theme.css file and add this to the bottom:
@media only screen and (max-width: 600px) {
.Product_Gallery {
position: relative;
margin-bottom: 28px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.Product__Slideshow Product__Slideshow--zoomable Carousel flickity-enabled is-draggable
{
height: 200px;
}
.breadcrumbs {
display:none;
}
.Product__SlideshowMobileNav {
display: flex;
align-items: center;
justify-content: center;
margin: 20px -20px 0;
width: 200px;
}
.features--heading-normal .Rte h4, .features--heading-normal .u-h4 {
font-size: 10px;
}
}
Should end up looking like this:
Let me know if it works
Hi and thanks a lot for help. Unfortunately for me it has not changed.
In customize it looks like this and simmilar setup on mobile.
No Problem, just had another look, it appears you’re missing the CSS for the title heading and Product Gallery.
Could you copy and paste the what you put into your theme.css file here for me so i can take a look?
Or pm me with your .myshopify.com link and i can take a look via collaborator access for you
Thanks a lot
sure this should be all added code. I guess you men not just yours right?
/header wishlist scss/
i.icon-swym-wishlist {
font-family: ‘swym-font’;
font-style: normal;
vertical-align: -80%;
}
i.icon-swym-wishlist+span {
vertical-align: -80%;
}
i.icon-swym-wishlist:after {
content: ‘’;
font-size: 130%;
line-height: 18px;
text-align: center;
display: inline;
}
/content rendered after swym is ready to avoid showing block/invalid chars/
.swym-ready i.icon-swym-wishlist:after {
content: ‘\f004’;
}
/Rámeček produktů/
.ProductItem__Image {
border: 3px solid #000;
}
.Image–fadeIn {
border: 3px solid #000 !important;
}
.pswp img {
border: 3px solid #000;
}
/zmenseni obrazku v quick view/
.vellir-peek-mode-modal-content .images-container {
width: 100%;
max-width: 450px !important;
}
/ramecek quick view/
.sv-main-image-container {
border: #000 3px solid
}
/align benefit text to top/
@media screen and (min-width: 1008px) {
#shopify-section-1617040785012c7d29 .Timeline__Item {
align-items: self-end;
}
#shopify-section-1617040785012c7d29 .Timeline__Inner {
padding-top: 0;
}
}
/velikost benefit ikon na mobilu/
@media (max-width: 767px){
.announcement-bar {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.announcement-bar img{
width: 25% !important;
}
}
/ramecek okolo custom obrazu/
.cl-po–preview {
border: 2px solid black;
}
@media screen and (max-width: 641px) {
#rap__med__instagram {
margin-top: 20px;
}
}
/schovej media wall na mobilu/
@media screen and (max-width: 640px){
.Collapsible__Content a[href=“/pages/design-own-poster-wall”] {
display: none;
}
}
/Fixace loga/
@media screen and (min-width: 1140px){
.Header–center .Header__FlexItem–logo {
margin-bottom: 0px !important;
float: left !important;
display: contents !important;
}
.Header__Logo {position: absolute !important; margin-bottom: 0;}
.Header–center .Header__FlexItem {margin-bottom: 0px !important;}
}
.Header__FlexItem { display: contents !important;}
/* 12/5/2021 */
span.pplr_preview_wrapper {
border: 3px solid black !important;
}
@media screen and (min-width: 1140px){
.Header–center .Header__MainNav {
position: relative;
bottom: 0;
margin-left: 160px;
padding-bottom: 0;
text-align: center;
}
.breadcrumbs {
display:none;
}
.Header__MainNav {
margin-right: 0;
margin-left: 100px;
}
.ets_megamenu:not(.mm-mobile) ul.list-menus {
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
z-index: 999;
width: 67vw!important;
}
}
.ets_megamenu:not(.mm-mobile) ul.list-menus {
float: left;
}
/Mensi view na mobilu/
@media only screen and (max-width: 600px) {
.Product_Gallery {
position: relative;
margin-bottom: 28px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.Product__Slideshow Product__Slideshow–zoomable Carousel flickity-enabled is-draggable
{
height: 200px;
}
.breadcrumbs {
display:none;
}
.Product__SlideshowMobileNav {
display: flex;
align-items: center;
justify-content: center;
margin: 20px -20px 0;
width: 200px;
}
.features–heading-normal .Rte h4, .features–heading-normal .u-h4 {
font-size: 10px;
}
}
Try this:
@media only screen and (max-width: 600px) {
.Product_Gallery {
position: relative;
margin-bottom: 28px;
margin-left: auto !important;
margin-right: auto !important;
width: 50% !important;
}
.Carousel
{
height: 200px !important;
}
.breadcrumbs {
display:none;
}
.Product__SlideshowMobileNav {
display: flex;
align-items: center;
justify-content: center;
margin: 20px -20px 0;
width: 200px;
}
.features--heading-normal .Rte h4, .features--heading-normal .u-h4 {
font-size: 10px !important;
}
}
If this doesn’t work for you, i’ll happily request collaborator access and have a look for you if you send me your stores .myshopify.com url
Hi woody,
i tried that however it messed up my homepage and moved the product options over the product pictures, i’ll be happy to provide collaborator access