Mobile Optimisationn

[Rama Devi]

Good Morning Bill, I have 3 questions

1) I have used a PNG for my Logo. The image is expanding too much & is appearing very Big in the Mobile version. Its fine on the Desktop version. How can I reduce the Size in Mobile version?

2) Please have a look at the 1st snapshot below. The Font size of the Product Name is so big that it is appearing in two lines. It is also overlapping the product images. I tried reducing the Font size in the code you gave me previously. But this is effecting the font size on the Desktop way too much. Can I reduce the font size of the product name just in the mobile version without effecting the desktop version?

3) Please have a look at the 2nd & 3rd snapshots below. The Mobile Menu is appearing like the 2nd snapshot by defualt. Is it possible to make it appear like the 3rd ( with the Sub Items opened by default? )

Thanks

Attachments:

1. 

   IMG_9564.png
   

2. 

   IMG_9559.png
   

3. 

   IMG_9560.png
   

[Bill Robbins]

Good Morning,

Let’s see how we can adjust items on your mobile site for you.

1. You can limit the size of your logo based on screen size. Here’s one way to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   	
   	#logo,
   	#text-logo {
   		max-width: 60%;
   	}
   	
   }
   

3. Update your settings.

---

2. You probably need a bit more padding on the top. That will push the image down and give more room for text. In your custom CSS find this:

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 35px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 5px !important;
	}

}

and change it to something like this:

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 35px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding-left: 0;
		padding-left: 0;
		padding-bottom: 5px;
		padding-top: 30px;
	}

}

You can adjust the padding-top: 30px; to change the fit there.

---

3. Good question, but the menu doesn’t have a way to make sub-items open by default. The javascript that powers the menu does not have that as a feature we can use here.

Let me know if I can help,
Bill

[Rama Devi]

Hello Bill,

1) The code is not working. The Logo in the mobile version is still the same. I tried changing the % to 40 & 30. It still the same

2) Here is the code you gave me earlier. There are two Codes. Should I make the changes in both 768px & 767px?

@media only screen and (min-width: 768px) {

ul.products li.product {
position: relative;
text-align: center;
padding-top: 50px !important;
}

ul.products li.product h3 {
font-size: 35px !important;
position: absolute;
top: 0;
width: 100%;
padding: 0 5px !important;
}

}

@media only screen and (max-width: 767px) {

ul.products li.product {
position: relative;
text-align: center;
padding-top: 50px !important;
}

ul.products li.product h3 {
font-size: 35px !important;
position: absolute;
top: 0;
width: 100%;
padding: 0 5px !important;
}

}

3) Not a problem. But the pointer that is appearing beside the main menu item is very small. It is so small that most of the people are not even realizing that sub items will appear if clicked on it. If there is a way to make it more prominent, that would do the job.

[Bill Robbins]

Hello,

1) I took a look and don’t see the code in your Custom CSS. Let me break down the CSS there for you:

@media only screen and (max-width: 520px) {
	
	#logo,
	#text-logo {
		max-width: 60%;
	}
	
}

The 520px in the top sets the maximum width at which the enclosed CSS should apply. The enclosed code is intended for screens 520 pixels wide and narrower. If you’d like to affect a different sized screen, change the 520 to a different number.

If you still have trouble, please leave the CSS in the custom css and also let me know which sized screen you’d like it to work on.

2) Same idea as the earlier explanation. Since you’re looking at the mobile version, change the @media only screen and (max-width: 767px) { one to affect those styles.

3) You’re welcome to make it larger if you’d like. Add this to your Custom CSS to do that:

.slicknav_nav .slicknav_arrow { 
	font-size: 20px;
}

Feel free to play around with the size there.

Bill

[Rama Devi]

Bill,

1) Still not working. Please have a look

2) I guess the code you gave increases the distance between the product image & title. But that is also not working. I even tried giving a padding value of 60. I understand that the 767px version is for mobiles & I reduced the Font Size in the code. The Product title alignment & font size are now set 🙂

3) The code works. I have increased the arrow size

Apart from 2-3 minor issues, I have finished customizing the website Bill. I myself & my team are very much satisfied with the output. Thanks for the awesome support. Do have a detailed look of our website & let me know how you feel about it. If you have any suggestions to improvises the look, please feel free to share.

Cheers

[Bill Robbins]

1 — I took a quick look on my phone and the logo did appear to be about half the width of the screen. I’ve attached a screenshot of what I’m seeing there.

2 — That one is on me. I added the padding to the h3 instead of the li. Since the title is absolutely positioned, padding doesn’t change much. Go with something like this instead:

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-left: 0;
		padding-left: 0;
		padding-bottom: 5px;
		padding-top: 100px !important;
	}
	
	ul.products li.product h3 {
		font-size: 28px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 5px;
	}

}

Hope that helps out. Best of luck as you wrap up and launch.

Attachments:

1. 

   File-Aug-20-3-34-13-PM.png
   

[Author]

Posts