Mobile Site Help

New Member
3 0 0

Hey.

 

Can anyone tell me how to make my website appear the same using a mobile device?

If this is not possible, how do I make the 2 gif's on the home page fit completely on a mobile device?

 

How do I make the background image on all the pages fit right on the mobile versions?

 

Also, how do I make the items on the "Music" page fit better on the mobile version?

 

And how do I remove the lines from the chart on the "Music" page on both versions?

 

My website is ayeliann.com

 

Thanks!

0 Likes

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

Hello ,

1)How do I make the background image on all the pages fit right on the mobile versions?---

You have to use another background image for mobile device

2)how do I make the items on the "Music" page fit better on the mobile version?----

Actually you put Inline css to td as shown below in screenshots.
Please remove from there and add it in theme.scss file

.scrollable-wrapper td{max-width:640px;}

Or you can edit directly
Go to that file and Replace this

<td style="width: 640px;">

with

<td style="max-width: 640px;">

3)ow do I remove the lines from the chart on the "Music" page on both versions?--

Can you please share screenshot for above as I am not getting this

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
3 0 0

Thank you.

 

1. What's the code to add another background image for the mobile site, and where do I enter it at? Can I resize the current background image and make it work for the mobile site? If so, what size should I use? And what's the code to make the 2 gif's at the top and bottom of the page fit on the mobile site?

 

2. Thanks for the info on the resizing the items for the mobile music page. It worked. I edited it directly.

 

3. There is a chart around the items in the music page. So there are lines around them. There is also a yellow line under the first item. How do I get rid of this?Capture1.JPGhow do i erase chart lines and the yellow line below?

4. Is there a way I can use different colors for headings and links on different pages? I like the color of my menu headings (HOME, GEAR, MUSIC), but I want the headings on the separate pages to be a different color. How do I change word Products to say "GEAR"?

0 Likes

@,

1. What's the code to add another background image for the mobile site, and where do I enter it at? Can I resize the current background image and make it work for the mobile site? If so, what size should I use? And what's the code to make the 2 gif's at the top and bottom of the page fit on the mobile site?

=>Hire expert for it because all your contents are on  backgroung image

3. There is a chart around the items in the music page. So there are lines around them. There is also a yellow line under the first item. How do I get rid of this?

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

table a {
	border-bottom: none !important;
}

4. Is there a way I can use different colors for headings and links on different pages? I like the color of my menu headings (HOME, GEAR, MUSIC), but I want the headings on the separate pages to be a different color. How do I change word Products to say "GEAR"?

Follow below steps

Go to navigation

2019-11-26_20-56.jpg

2019-11-26_20-58.jpg

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Astronaut
1089 149 274

Hi Ayeliann, listened to the two videos on the bottom of your music page, just want to say it was real good. 

 

As for your questions, to add another background image, or effect anything mobile only -- you'll need to use media queries in CSS. They basically say "If your screen size is less than or greater than this, then apply these styles". Unfortunately I don't think you can resize that image to work for a mobile background. The reason being that the image is longer than it is tall, and while that's great on destkop, phones are taller than they are large. In fact, the quality is pretty poor on that picture as it is and I'd consider redoing it. The way you would swap it out would be to go into your theme.scss.liquid file in your assets folder and add a media query to the bottom of the file:

 

@media (max-width: 750px){
  body {
    background-image: url('path-to-your-mobile-background-image.jpg');
  }
}

For your border you can add this above the media query:

 

.main-content .grid a {
    border-bottom: none;
}

and this to get rid of the border for the table:

 

.main-content .grid td {
    border: none;
}

To change the title for that, you'll have to create a collection called "all" as you're using your default collections/all link. See this link:

 

https://help.shopify.com/en/themes/customization/collections/change-catalog-page

 

That, or you can create a collection called GEAR, put all your products in that collection, and then link that collection to your GEAR link in your navigation instead of where you have it now.

 

Not that you're asking for an opinion, but I think you should consider a redesign of your site in general. It looks pretty unprofessional, the readability is really not good. I'd consider taking the elements you know are going to be in your site, say take a screen shot of the page, and then rebuild it in an image editing program and changing colors around to see what looks best, then going back and modifying your site. If you must keep that background image, you're going to need to make adjustments to your text so that you can actually read on that background. Perhaps adding a text shadow would help. I would try to look around at other sites of other artists who are doing something similar and see what they've got going on. Pick and choose what you like/don't like and try to build off that. I really only say this to help because as a consumer it looks very amature, and since your music is well produced the website really takes away from that. Feel free to message me with any questions.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes