Premium Theme Support › Themes Harbor › Prosperity

Regarding to make container

  • Author
    Posts
  • #162400
    ssccglapex
    Member

    Dear sir,
    I tried to make a box for example but here it looks different in mobile browser. It looks perfect in laptop but not in mobile.
    Please see Q-5 of this link;
    https://ssccglapex.com/aptitude-mcqs-on-allegation/
    How to adjust it for mobile browser also.
    I want that the content should be fit in container box.
    Please help me for this.
    Thank you.

    The blog I need help with is: (visible only to logged in users)

    #162408
    tarasdashkevych
    Theme Author

    Hello,

    I’ve checked your Q-5 on the provided page and here is what I see:

    – Large screens: https://snipboard.io/pJYNz8.jpg
    – Small screens (mobile): https://snipboard.io/kB2x5y.jpg

    If you want to modify the styles depending on the screen resolution, then you need to use media queries. For more information about CSS media queries, please see tutorials here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    If you have any additional questions on this topic, please let me know in this tread.

    Kind regards,
    Taras

    #162415
    ssccglapex
    Member
    Original poster

    dear sir,
    I want to say that when click in Q-05 options, then we will get answer. here we see the answer text are is not fit in container that means answer text is expand the out side of the container.
    please see the link again;
    https://ssccglapex.com/aptitude-mcqs-on-allegation/
    thank you.

    #162418
    tarasdashkevych
    Theme Author

    Thank you for proving additional information. I can see the issue now.

    It looks like the math text (answer), which comes from a WordPress.com core, does not break into multiple lines.

    To fix the overflow problem, you’ll need to add a scroll bar to the container.

    It can be done using overflow-x: auto; style for your container, which currently has a width and border styles (style=”width: auto; border:1px solid black;”).

    Alternatively, you can group your container styles into CSS class (see tutorial), and use the class instead on inline styles.

    So, you class might look like this:

    
.answer-block {
  width: auto;
  border: 1px solid black;
  overflow-x: auto;
}

    Hope this helps. Please let me know if you have any additional questions about this topic.

    Kind regards,
    Taras

    #162419
    ssccglapex
    Member
    Original poster

    Dear Sir,
    I have added the above CSS which is provided by you
    .answer-block {
    width: auto;
    border: 1px solid black;
    overflow-x: auto;
    }
    But I see that this is not working for the “over-flow”. We need to scroll side by side the answer.
    It is not fix in container.
    Please see that question’s answer in mobile browser.
    I have added this CSS in” Additional CSS “.
    Please solve this problem.

    #162423
    tarasdashkevych
    Theme Author

    The reason why it does not work is because you container does not have your newly created class (.answer-block).

    See a screenshot: https://snipboard.io/ectl7b.jpg

    As you can see, the DIV, which serves as a container for your answers, does not have a CSS class. As a result, the browser cannot apply styles to that DIV.

    If you want to use the CSS class then you need to add it to your DIV, and remove inline styles (style=”width: auto; border:1px solid black;”).

    So, you DIV should look like this:

    <div class="answer-block">

    To learn more on how to use a custom CSS classes, please read this tutorial.

    Please let me know if you have any additional questions about this topic.

    Best regards,
    Taras

    #162429
    ssccglapex
    Member
    Original poster

    Dear Sir, Your teaching style is very simple and knowledgeable. Now it is working.
    Thank you very much.

    #162432
    tarasdashkevych
    Theme Author

    You are very welcome. I am glad I was able to help.

    Kind regards,
    Taras

  • The topic ‘Regarding to make container’ is closed to new replies.