how to make a responsive theme shopify

hello everyone this is alan from ecom,simplified,today i'm going to go through a short,tutorial,on mobile responsiveness with shopify,themes,as we all know everyone shops on mobile,more than any other devices,because it runs on the go all the time,and it's just,easier in certain aspects so,now we're going to look at the debut,theme as an example,you can see this by inspecting your,store,on a browser such as google chrome,once you inspect there's a toggle here,which you can,choose to toggle the device that you're,um seeing,your store in so once you toggle it and,you can change,how large you want your display to be,you can change different preset devices,and you can even make it responsive,so you can see how your store,changes and expands or compresses as a,store,as a width decreases so,some themes are more responsive than,others by minor amounts,or like how they expand and compress,but um today we're going to go through a,tutorial on,how we can change certain elements by,the stream width,just so that we can fine tune our,website to,showcase your store but better,so an example why we would do this is on,mobile,because it's limited space if we use,this font size,and the the product title becomes too,long,it will take up maybe two rows and it,might not look as nice,and you don't really want that to,take up too much space on mobile but on,desktop it is completely fine,so with this in mind we're going to go,to the code editor,so if we go to online store themes,actions,and then edit code we,would like to find a theme styling sheet,called theme.css,this file can be a different name on,other themes but uh the most common one,is theme.css or theme.scss.liquid,the easiest way is to type the theme,here and it'll be under the essays,folder,um called thing.css,so once you open it go down to the very,bottom so you don't affect any of the,other code and the theme file,and make it a few new lines and we can,start a little customization,so to do this we want to target only a,media screen that is a maximum,of 480 pixels,so by doing this we're saying that if,your screen width,is lower or equal to 480 pixels,we are going to display this so now that,we,um have that in mind we're going to look,at the,part we want to target so we wanted to,look at the,title here so if we inspect and hover,over the title,this is the part we want to edit so we,want to,copy this class,and take it over and we're gonna target,this,class with a full sub front and we're,gonna change the font size to a smaller,font size,so that we know that it will fit,properly even if the title was to become,longer,so now that we have got this media query,in place,we can save this,and we will hopefully see that once this,is updated,that this product title will become,smaller so we'll refresh this page,and you can see that the product title,is now a lot smaller,and if we to test this you can see that,the pixel width here is 448 pixels,if we increase it slowly and go further,than,480 pixels it will become larger,back to its default size,so you can see how we can customize the,mobile responsiveness as much as we like,with this media query,you can also change this to a larger,width so if you want to say encompass a,um a an ipad or a bigger device or,you can even say changing it to,only larger devices so you want to make,a minimum of,900 pixels so anything,900 pixels and larger this is what it,will show,so there's a lot of applications you can,do with,this media query and to customize your,store,as much as you would like and that is it,for today and hopefully you found some,value from this video and i hope to see,you in the next one,feel free to comment like or subscribe,thank you for watching

Congratulation! You bave finally finished reading how to make a responsive theme shopify and believe you bave enougb understending how to make a responsive theme shopify

Come on and read the rest of the article!