Problem with composition in mobile

Unite Theme
1

hi,

i’m using unite theme, my web is in development progress: www.jiwtraining.com

my problem is:
when i open the web in my wide screen monitor PC, it looks great.
but, when i open it through another device (smartphone, iPad, tablet),
the composition of my homepage (sample-static page) become messy, especially the menu, grey left right button on carousel & 3 image that i placed under the carousel slider

the carousel image responsive & adjust their size, but not with the grey lef-right button.
the menu become 2 row
3 images that i placed under slider also become 2 (or even 3) row in vertical

strangely, it doesn’t happen with posts & pages. All images in posts & pages wonderfully responsive and having no problem when i opened from any device. the problem only in my static homepage.

can you help me to make the menu, grey left-right button in carousel slider, and 3 image that i placed under slider become responsive and can automatically adjust their size to fit in any device screen?

thanks before… by the way, this unite theme is really awesome!

2

Hi @josuawahyudi,

I hope you are well today and thank you for your question.

You can try resolving the issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Theme Options -> Other -> Custom CSS

a.carousel-control {
    height: auto; 
}

body.home .entry-content p img.alignnone {
    margin: 0 0 10px;
}

Please note that on small screen we can’t display the three images in one row as they will become too smaller so instead we’ll display them in a single column.

Best Regards,
Movin

3

hi movin,

thank you for your quick respond, i really appreaciate that.

i put your code and nothing changed.
the grey button already solved whe i add “height:auto” in bootsrap.min.css file

now there are 2 issues left:

(1) keeping the head menu still 1 row in ipad
(2) making the 3 images that i placed under the slider also in 1 row in ipad

4

Hi @josuawahyudi,

i put your code and nothing changed.

Don’t you see the change as shown in the attached screenshots that were taken before using CSS code and after using it?

the grey button already solved whe i add “height:auto” in bootsrap.min.css file

Then you should have already updated me here about this so that we can avoid redundant work. I am sure you understand this.

Also please note that if you make changes in the theme file like bootsrap.min.css then you have to make these changes again after theme updation as changes made in the theme files get lost on theme updation so instead you should use the custom CSS code as described above.

now there are 2 issues left:

(1) keeping the head menu still 1 row in ipad
(2) making the 3 images that i placed under the slider also in 1 row in ipad

You can try achieving this by using the following CSS code.

@media (min-width: 768px) and (max-width: 991px){
.navbar-default .navbar-nav > li > a{
	font-size: 10px;
	padding: 10px 9px;
}

}

@media (min-width: 768px) and (max-width: 1200px){
body.home .entry-content p img.alignnone{
	width: 31.3%;
}

Best Regards,
Movin