Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
advaitraut
@advaitraut

Hi I am using responsivebp and here is a snippet of my code

<div class="row belt">
        <div class="col-m-1"></div>
        <div class="col-m-3">
            <div id="pic1-frame">
                <img id="pic1" src="images/picture1.png">
            </div>
        </div>
        <div class="col-m-3">
              <div id="pic2-frame">
                <img id="pic2" src="images/picture2.png">
              </div>
        </div>
    </div>

Along with content="width=device-width, initial-scale=1"
When I see the html page it looks as expected in the laoptop browser. But when I view the page in android mobile browser, just one image occupies the whole screen.
Can you please help me with this issue?
Your inputs will be appreciated.

James Jackson-South
@JimBobSquarePants
Well it looks like you are only setting a column width on medium viewports. If you want those columns on mobile viewports you are going to have to use the col-xxs-*, col-xs-*, or col-s-* classes. If you could share a more complete demo of your code and your expected output I'd be happy to help you out.
advaitraut
@advaitraut
@JimBobSquarePants
Here is the link to my sample page
http://brotli.herokuapp.com/photos/page1.html
James Jackson-South
@JimBobSquarePants

Looking at your code I can very quickly see that you are not using the .containerclass to wrap around rows. You are overflowing the page.

What do you expect the page to look like on mobile?

advaitraut
@advaitraut
I have added div . container around rows. Still it looks the same in the mobile browser.
James Jackson-South
@JimBobSquarePants
You still haven't shown me what you are trying to achieve. WIthout that design/wireframe it's impossible for me to help you.
advaitraut
@advaitraut
I require it to look like just as what we see in the browser.
e.g. slider and button in the same row
two photos in the same row without overflow
Any more info required ?
I have also incorporated the changes you mentioned in the link.
James Jackson-South
@JimBobSquarePants
Ok... change you col-xs classes to col-xxs to use the very bottom tier. That should do it.
demo.png
James Jackson-South
@JimBobSquarePants
I just did it in browser tools to check
advaitraut
@advaitraut
I changed it to xxs and it worked.
James Jackson-South
@JimBobSquarePants
:smile: Excellent!
advaitraut
@advaitraut
thanks a lot
James Jackson-South
@JimBobSquarePants
My pleasure
advaitraut
@advaitraut
when i click on Go button it shows the panda image.. will it have the same length x width as what we see without pressing Go button
James Jackson-South
@JimBobSquarePants
As long as you use the same column classes and the container is the same with yes.
advaitraut
@advaitraut
great !
Do you suggest any more changes or any more suggestion you have for better design ?
Also are there some templates available using your responsive library ?
James Jackson-South
@JimBobSquarePants
No you seem to be on the right path. No templates I'm afraid, the idea of the framework is to not force creative ideas or limitations on the developer. It's simply there to make it much easier to build websites.
advaitraut
@advaitraut
Ok.
Thank you very much for your help :smile:
advaitraut
@advaitraut
@JimBobSquarePants
With responsive framework there is a jquery file. I wish to use the most recent version of jquery. What is the highest compatible version of jquery can be supported by responsive framework ? I use responsive v4.1.3.
James Jackson-South
@JimBobSquarePants
@advaitraut v4.1.3 should work perfectly with the latest version of jQuery. In fact, that version was released specifically to fix some bugs with Jquery v3+
advaitraut
@advaitraut
@JimBobSquarePants Ok thanks :)
advaitraut
@advaitraut

Hi @JimBobSquarePants
There is <button> in a <div class='row'><div class='col-xxs-2'>_here_</div></div>

The height of the row is larger than the button contained in it. Also the button is shown aligned up-side. How to make it fit to the row ? or middle-align it within the row ? I am attaching the image:
alt

Craig
@craigs100
Hi @JimBobSquarePants. Have been using ResponsiveBP for over a year now but have never used the push/pull stuff to swap column positions. I "think" I need to use it now but it's confusing me. I have <div class="col-s-7">Left Col</div><div class="col-s-5">Right Col</div>. Above "s" they should be as they are but I need to swap them over if smaller than "s". Have tried <div class="col-s-7 push-xxs-5">Left Col</div><div class="col-s-5 pull-xxs-7">Right Col</div> and a couple of other combinations but they're either permanently swapped or one above the other. Could you give me a steer please or am I trying to do something stupid anyway?
James Jackson-South
@JimBobSquarePants
@advaitraut Do you have a code sample I can look at?
James Jackson-South
@JimBobSquarePants
@craigs100 Try using .push-xxs-only and .pull-xxs-only if that doesn't work, we can add incremental versions of those classes.
lsrdg
@lsrdg

Hi everyone,
I am collecting some material about responsive design (in Portuguese), and I would like to use Responsive as the main example. Simply because it's awesome it works!
But I noticed that a lot of things that I were writing were already documented in Responsive's docs. I thought that in instead of writing everything again, wouldn't it be better just to translation the whole man page to Portuguese? But of course, I would like to here what you guys think about it.

Since I'm not a developer, I can't see another way to contribute to the project, and it would be my pleasure to give something back.

I forked and branched out (pt) on github. It will take a couple of weeks to get everything translated, spell checked and reviewed, but I believe it is totally doable.

I could obviously host it as an unofficial translation, but since the translation comes from the gh-pages, it wouldn't be a problem to translate the whole website to brazilian Portuguese (responsivebp.com/pt/ ?).

Anyway, I hope to hear from you guys soon, and thank you very much for this amazing framework!

advaitraut
@advaitraut
@JimBobSquarePants Hi, How can I Close the currently open modal window programmatically via a button click ?
In case If I have to use JavaScript, can a function .modal("hide") mentioned in the documentation solve this ? If that is the case then how can I really use these functions ?
James Jackson-South
@JimBobSquarePants

Hi @lsrdg :smile:

That's really great to hear that you like the library; It's made my day to read what you said.

It would be amazing to see a translation of the documentation. As you say it would have to be an unofficial translation as I can't read or write Portuguese but it would be definintely something we would be happy to endorse.

As for domains, I had a look at what the Bootstrap team do and the domain names are completely separate.

http://v4-alpha.getbootstrap.com/about/translations/

So if you could think up something appropriate we could do the same and link directly from the home page rather than hide in an about section.

Cheers

James

James Jackson-South
@JimBobSquarePants
@advaitraut calling $("YOUR_TRIGGER_SELECTOR").modal("hide"); will work to close the modal.
lsrdg
@lsrdg
@JimBobSquarePants,
That's great to hear :)
lsrdg
@lsrdg

I totally agree that it should be kept as unofficial.

The question about the domain is just because I'm translating right into copies of the HTML files, in other words, the 'website' structure is already there and done.

In the beginning, the idea was to translate the text, but when I noticed that the website is basically the docs plus a couple of pages, I opted for the website... Once the documentation is translated, the website is just one step away.

But I would like to hear what you think about that as well: text (in instead of a web page) can be just a bunch of .md files on a repository. On the other hand, it makes sense to have things like "Why Responsive". When I was in Brazil, Bootstrap would never load properly (old device, terrible connection)... That's why Responsive was the way to go!

Anyway, it shouldn't take more than six weeks to translate. But it will take a couple of weeks to refine it. And I'll probably be here bothering you guys ("does this really means that...?").

Cheers,

Elias

advaitraut
@advaitraut
@JimBobSquarePants Thanks..
I'll try this.
advaitraut
@advaitraut
@JimBobSquarePants
<div id="my-modal">
<div>Msg1</div>
<button id="cancel-button" onclick="$('#my-modal').modal('hide');"></button>
</div>
Will this work ?
James Jackson-South
@JimBobSquarePants

Tut tut... @advaitraut don't ever use onclicklike that.

What is div "my-modal" for? That shouldn't be a trigger since it is not a link nor a button.

@lsrdg Is there a public repo for your documentation? If so I can always help you out there if you ever need me to.
lsrdg
@lsrdg

@JimBobSquarePants Yes, it can be found here: https://github.com/lsrdg/Responsive

The README has some information, check it out if you wanna know what's going on. The translation is going a bit slower, because there are a lot questions (kept in a personal text file). But most of them are being answered by simply stopping the translation and playing a bit more with the framework.

I'll try to come with questions only after the Javascript is done, but it would awesome if someone else could give some feedback, maybe spot some kind of inconstancy across files, or even suggest a better (git/translation) work flow. (:

lsrdg
@lsrdg
By the way, I'm using the README to keep track of changes. Let me know if there's a way to make it more accessible for everyone.
advaitraut
@advaitraut
@JimBobSquarePants How can I automatically load the modal screen in the beginning once I load the page ?
Michael Elias
@mikowl
I downloaded the latest responsive.zip but I'm getting an "Unable to expand responsize.zip" message - anyone else run into this issue?
James Jackson-South
@JimBobSquarePants
Odd, what OS are you on? I just opened it in Win 10 using both FileExplorer and 7Zip.
James Jackson-South
@JimBobSquarePants
I'm guessing MacOS ResponsiveBP/Responsive#99
Michael Elias
@mikowl
Yeah I'm on MacOS, that's exactly what's happening on my end as well.
James Jackson-South
@JimBobSquarePants
I'll try and switch out the zipping system asap.
James Jackson-South
@JimBobSquarePants
I've updated the binary manually for now. Will look to fix the automated release asap
lsrdg
@lsrdg
Hey @JimBobSquarePants , just passing by to mention that the documentation (actually, the whole website) is 100% translated to Portuguese (pt_BR). It is not completely done yet, but it is getting closer. As we talked before, it can't and won't be officially supported, but since it follows the website's structure, it just makes sense in that context (where the reader can see, test, check and interact with the examples)... I would like to hear if have any thoughts on this? How could it be "published" (since it's not for my personal use...) but still be an obviously unofficial source of information? Take care (:
James Jackson-South
@JimBobSquarePants

@lsrdg Oh wow! That's so cool!

I guess you could host it on a Github Pages and I could link to it from the main site?

lsrdg
@lsrdg
That's great, I just want to read it again and then I'll create the page. Sorry for the delay, but I've used most of the time having fun with Responsive in instead of just translating. o/