Mobile responsiveness

This topic has 6 replies, 2 voices, and was last updated 10 years ago by Sakin.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
November 8, 2014 at 12:49 am #47099

Kim
Participant

Sakin,
My site has a couple of issues when viewing on mobile phones and tablets.

1) My H2 sub-headings show up larger than my H1 main headings.
2) Some of my images show up sideways and don’t load all the way. For example. Please look at the following article on your mobile device:

https://hidemyage.com/sad-follow-cold-fusion-hair-extensions/

The subheadings are huge and the 5th and 7th images aren’t loading all the way and are sideways.

Thanks!
hidemyage.com

November 8, 2014 at 4:24 am #47117
Sakin
Keymaster
@Kim:
1. Thanks for mentioning about the issue 1 for font. We will fix that in new version update. For now, you can add the following css in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (max-width: 767px) {	
	.entry-title,
	.entry-content h1 {
	    font-size: 22px;
	}
	.entry-content h2 {
	    font-size: 20px;
	}
}
```
2. Then size of the image depends on the image size you have uploaded. I see that some of the images in that post is smaller in width. So, it doesn’t cover the full width of mobile devices. Increase the width of the images and it will be fine.
November 8, 2014 at 5:13 am #47127

Kim
Participant

1. Anytime! This doesn’t seem to work for me. I made the variance a little bit larger to make sure (h1-22px & h2-16px) and there doesn’t seem to have any difference. Please feel free to take a look on the backend.

2.Hmmm. I don’t think this is the issue – as those images effected are both 960×1280 and if you look at this post there are images at just 400×500 that look normal.

https://hidemyage.com/charcoal-beauty-regimen-who-knew/

November 8, 2014 at 10:53 pm #47175
Sakin
Keymaster
@Kim:
1. It should work. Can you try changing the max-with to 960px.So, the css will be as below:
```
@media screen and (max-width: 960px) {
	.entry-title,
	.entry-content h1 {
	    font-size: 22px;
	}
	.entry-content h2 {
	    font-size: 16px;
	}
}
```
2. Look at these images
https://hidemyage.com/wp-content/uploads/hair-extension-close-up-e1415294943697-215×250.jpg
https://hidemyage.com/wp-content/uploads/IMAG1143-342×600.jpg
November 10, 2014 at 6:24 am #47224

Kim
Participant

1. It worked. For some reason my cell phone wasn’t clearing the cache.
2. Those are not the images in question. It’s these:

https://hidemyage.com/wp-content/uploads/IMG_0200-e1415297731846.jpg 600×800
https://hidemyage.com/wp-content/uploads/IMG_0397-e1415294257844.jpg 960×1280

They are also rotating to the right?

K

November 10, 2014 at 6:42 am #47229

Kim
Participant

Additionally I just now noticed that the categories drop down menu in footer 2 is too wide for the screen making it impossible to use the dropdown. Does this happen when you use it?

hidemyage.com
Kim

November 13, 2014 at 10:31 pm #47434
Sakin
Keymaster
@Kim:
2. I am still confusing as I don’t see those image in your site.
For Category select box, can you add the following css in “Appearance => Theme Options => Custom CSS” box until we release the new version update to fix it.
```
select {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	max-width: 100%;
}
```
Author

Posts