Google Map Responsive

[ABDELAZIZ]

How to make a google map responsive on my website. Theme “construction”.
Thakns

[Sonl Sinha]

Hi,

Kindly show us your website URL so that we can assist further.

Regards,
Chris

[ABDELAZIZ]

the website is “shapedforyou.com/contact-us”.

Thanks

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:767px) {
iframe{width:100% !important;}
}

Regards,
Dave

[ABDELAZIZ]

OK, Thanks it worked.

[ABDELAZIZ]

Hey Dave,
I have another question, The slider caption does not show up on mobile, how I can make my slider titles show up om small screen as well.

Thanks a lot

Aziz

“Construction” theme
shapedforyou.com

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:767px) {
.nivo-caption { display:block !important; width:60%;}
.slide_info h2 { font-size:14px !important;}
.slide_info h2 span { font-size:20px !important; line-height:24px !important;}
.button { padding:0 20px;}
}

Regards,
Chris

[ABDELAZIZ]

Thank you!

Aziz

[Sonl Sinha]

🙂

[ABDELAZIZ]

Hi, I have a question, The slider caption including paragraph does not show up on mobile, how can I make my slider titles show up om small screen as well.

Also, when I open the website in a mobile phone, and click on “Menu”, it does not show properly (screen shrinks), please have a look at http://canadastonedesignltd.com.

Thanks in advance,

Aziz

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:980px) {
.header .header-inner .nav { width:100%;}
}

@media screen and (min-width:320px) and (max-width:767px) {
.nivo-caption { top:3% !important; left:0 !important; padding:0 20px !important;}
.slide_info h2 { font-size:14px !important; line-height:20px; display:block !important;}
.slide_info h2 strong { font-size:18px !important; line-height:0 !important;}
.nivoSlider img { width:140% !important; margin-left:-20% !important;}
.slide_info p { margin-bottom:16px !important;}
.slide_info a.sldbutton { padding:6px 10px !important; font-size:12px !important;}
}

Regards,
Chris

[ABDELAZIZ]

Hi Chris, I did copy and paste the code but unfortunately, its still not working.

Regards,
Aziz

[Sonl Sinha]

Hi,

Kindly remove the css code which i sent.

Regards,
Chris

[ABDELAZIZ]

HI,
I did. So what’s next.

Regards,
Aziz

[Sonl Sinha]

Hi,

Kindly used this css code there:

@media screen and (max-width:980px) {
.header .header-inner .nav { width:100%;}
}

@media screen and (min-width:320px) and (max-width:767px) {
.nivo-caption { top:3% !important; left:0 !important; padding:0 20px !important; display:block !important;}
.slide_info h2 { font-size:14px !important; line-height:20px; display:block !important;}
.slide_info h2 strong { font-size:18px !important; line-height:0 !important;}
.nivoSlider img { width:140% !important; margin-left:-20% !important;}
.slide_info p { margin-bottom:16px !important;}
.slide_info a.sldbutton { padding:6px 10px !important; font-size:12px !important;}
}

Regards,
Chris

[Author]

Posts