Problem solution needed regarding Vitor project Bootcamp


(Shekhar Nunia) #1

Hello everyone,
I have few doubts, if anyone knows any solution about them kindly help.

  1. Markdown Image responsiveness:
    when I try to put an image link which is very big in size then it will not fit into page, how to make it adjust I have testing this and here is the link to that post

  2. In the same post at the comment section, there is a method to do control + enter to submit the comment but how to submit comments in mobile, I don’t know if there is some alternative, if there is please help.

Thanks


(Shekhar Nunia) #2

Actually I came up with a solution but I don’t know if it is best approach but it working for me right now.

For Image I check HTML and find that the tag was inside

so I just did

p img{
  max-width:100%;
  height:auto;
}

if I have done

img{
  max-width:100%;
  height:auto;
}

then that will select all the images which may or may needed so I just select the markdown image.

For comments, I didn’t get any solution so I just change the js little bit but may be it was not a good thing,

previously the code was:

$("#comment").focus(function () {
  $(this).attr("rows", "1");
  $("#comment-helper").fadeIn();
});

$("#comment").blur(function () {
  $(this).attr("rows", "1");
  $("#comment-helper").fadeOut();
});

$("#comment").keydown(function (evt) {
  var keyCode = evt.which?evt.which:evt.keyCode;
  if (evt.ctrlKey && (keyCode == 10 || keyCode == 13)) {
    $.ajax({
      url: '/articles/comment/',
      data: $("#comment-form").serialize(),
      cache: false,
      type: 'post',
      success: function (data) {
        $("#comment-list").html(data);
        var comment_count = $("#comment-list .comment").length;
        $(".comment-count").text(comment_count);
        $("#comment").val("");
        $("#comment").blur();
      }
    });
  }
});

So I changed the rows from 3 to 1 and

$("#comment").focus(function () {
  $(this).attr("rows", "1");
  $("#comment-helper").fadeIn();
});

$("#comment").blur(function () {
  $(this).attr("rows", "1");
  $("#comment-helper").fadeOut();
});

and I removed the

if (evt.ctrlKey && (keyCode == 10 || keyCode == 13)) {

to this

if ((keyCode == 10 || keyCode == 13)) {

and now if I simply press enter in mobile then comments get posted.
This is not the right approach but I try to do something which may or may not work.
The code I posted about is here if anyone want to check it