not responsive on mobile landscape

Bootstrap Studio Help
1

Dear, thanks for your product, i found it hard as i am dummy to codings etc. i thought it will be all GUI, sorta drag drop. anyhow, i am struggling.

I just created www.123print.ch if you look at this site, it works perfect on all screens, but not on iPhone 6 landscape mode, if i am missing something? guide please.

thanks

Ihtsham

2

That is not a bootstrap studio website, nor did you just create it. Its not responsive at all even for that matter. It's not even HTML5 so ... yeah. lol

3

Jo, instead of help, you just wasted your and mine time. Sad.

4

Excuse me? I went to the website. Your link takes you to a site that is most definitely not made with bootstrap let alone boostrap studio. Not wasted there, maybe you gave the wrong link? That link takes me to a site for programming, and now when I click it it says it's unsafe to boot (just means no SSL is all).

What I saw was not anything made with BSS. Not sure what else you want me to say there, I can't help you with the site if the link isn't to the site you created with BSS.

5

I am surprised, how come. can you please check again. There was an issue this morning about SSL, but not now. Thanks for you help in advance.

6

I did finally get it to load the new website. Not sure what's up on your end though as it looks like it's working fine to me. Have you tried clearing your cache to make sure the new updates were showing? I haven't checked it specifically on a phone, but when I narrow the browser down to phone size, it looks just fine to me. I don't see any spots at all where it breaks so it should be showing correctly on all sizes from what I can see.

7

You don't have any media queries setup for that display size.

Put classes on your h1's so they can be targeted individually and move their inline CSS into those classes. Even better use h1's correctly, those should probably be DIVs with the class of h1 if you want to keep that base styling.

Try this CSS on for size. You will have to remove the inline CSS for it to work correctly.

@media (max-width:767px) and (orientation:landscape){
    .jumbotron{
        margin-bottom:0;
    }
    .jumbotron .col-md-6{
        float:left;
        width:50%;
    }
    .jumbotron p{
        display:none;
    }
    .jumbotron h1:nth-child(2),.jumbotron .h1:nth-child(2){
        padding-top:20px;
    }
    .jumbotron h1:nth-child(3),.jumbotron .h1:nth-child(3){
        padding-bottom:20px;
    }
}

I used Chrome an opened the Dev Tools (F12 or right click inspect element) and toggled the device tool (CTRL+SHIFT+M). Looking at the site set the dropdown that says Responsive to iPhone 6 and clicked the rotate button for landscape mode.

Saj