Google Map Responsive

Home Forums Construction Pro/Build Forum Google Map Responsive

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #71111
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

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

    #71126
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Chris

    #71202
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

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

    Thanks

    #71250
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    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

    #71360
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

    OK, Thanks it worked.

    #71393
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

    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

    #71463
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    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

    #71517
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

    Thank you!

    Aziz

    #71559
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    🙂

    #73906
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

    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

    #73908
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    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

    #73909
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

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

    Regards,
    Aziz

    #73911
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    Hi,

    Kindly remove the css code which i sent.

    Regards,
    Chris

    #73916
    ABDELAZIZ
    Member
    • Topics: 9
    • Replies: 30
    • Total: 39
    Member since: April 25, 2017

    HI,
    I did. So what’s next.

    Regards,
    Aziz

    #73929
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.