In different devices layout is breaking #10455

Alam487 · 2021-08-23T09:39:32Z

Alam487
Aug 23, 2021

Here i have used quasar framework UMD links to make site in responsive and it is working as expected. But coming to different devices the pages are stretching. Like in windows the layout is fine but comparing the site with mac devices the layout is stretching. Below is the attached files and browser version details.

Laptop: Macbook Pro
Browsers:

Firefox: 91.0.1(64-bit)
Chrome: Version 92.0.4515.159 (Official Build) (x86_64)
Layout from 15" Macbook Pro laptop:

Layout from 24" monitor that is connected to same MabookPro laptop:

Layout in windows 10 and it is fine as you can see.
Google Chrome is
Version 92.0.4515.159 (Official Build) (64-bit)

Please let me know how to fix this issues

MilosPaunovic · 2021-08-23T09:43:13Z

MilosPaunovic
Aug 23, 2021

It is different because screen resolutions are probably different. That is something that should be handled in your code, either by limiting width or by any other solution that works for your case.

2 replies

Alam487 Aug 23, 2021
Author

Thanks MilosPaunovic Actually the issue is like in my windows laptop the layout is fine at every respective page. But while we are testing with different devices like mac at that time the pages are completely stretching.

MilosPaunovic Aug 23, 2021

I'm guessing you're having trouble with cross-browser compatibility, especially with Safari; it has its own quirks and you need to adjust your page accordingly.

MatthewSH · 2021-08-23T14:57:18Z

MatthewSH
Aug 23, 2021

Correct me if I'm wrong, but the only thing I'm seeing "wrong" is the images are not filling the entire space.
So for this I have 2 questions...

Are you using QImg (for the list of items) or QCarousel (at the top) on the page?
- If yes to above with QImg, what fit mode are you using?
- If no, could you share the code that's powering that carousel at the top?
What's the original resolution of the image?

0 replies

Alam487 · 2021-08-24T06:52:31Z

Alam487
Aug 24, 2021
Author

Thanks @matthew Hatcher for the answer. So I have updated my question please review it once .

Here is the image which i am using
<a target='new' href="https://click.linksynergy.com/fs-bin/click?id=xVjWsER7/IE&offerid=897385.10002271&subid=0&type=4"><IMG border="0" alt="Microsoft Surface Book 3" src="https://ad.linksynergy.com/fs-bin/show?id=xVjWsER7/IE&bids=897385.10002271&subid=0&type=4&gridnum=17"></a>
And here is the quasar UMD links i am using

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet" type="text/css">
    <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@^1.0.0/font/bootstrap-icons.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.0.4/dist/quasar.rtl.prod.css" rel="stylesheet" type="text/css">
  </head>

3.And here is the body link

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.0.4/dist/quasar.umd.prod.js"></script>

4..Quasar config

<script>
     const app = Vue.createApp({
        setup () {
          return {}
        }
      })
      app.use(Quasar, {
        config: {
          /*
          brand: {
            // primary: '#e46262',
            // ... or all other brand colors
          },
          notify: {...}, // default set of options for Notify Quasar plugin
          loading: {...}, // default set of options for Loading Quasar plugin
          loadingBar: { ... }, // settings for LoadingBar Quasar plugin
          // ..and many more (check Installation card on each Quasar component/directive/plugin)
          */
        }
      })
      app.mount('#q-app')

5.So please let me know where I am going wrong and what should need to change for the responsive layouts.

1 reply

MatthewSH Aug 24, 2021

This is looking more and more like a general CSS issue and how it may have no been built for responding to different screen sizes. If this only happened after sliding in Quasar then that's probably the issue, not Quasar but the fact that the website may have no been responsive to multiple resolutions prior.
I can't look at it because literally, every link you have is hard blocked by our firewall for being malicious web advertisements, which is definitely something you don't want 🤔
If you start using QCarousel you might fix your issue, but you could always try adjusting your images CSS to change its fill type or whatever the exact rule is called, I can't recall if it's fill/fit/cover or whatever. You'll have to look it up.

Uh oh!

In different devices layout is breaking #10455

Uh oh!

Uh oh!

Alam487 Aug 23, 2021

Replies: 3 comments · 3 replies

Uh oh!

MilosPaunovic Aug 23, 2021

Uh oh!

Alam487 Aug 23, 2021 Author

Uh oh!

MilosPaunovic Aug 23, 2021

Uh oh!

Uh oh!

MatthewSH Aug 23, 2021

Uh oh!

Uh oh!

Alam487 Aug 24, 2021 Author

Uh oh!

Uh oh!

MatthewSH Aug 24, 2021

Alam487
Aug 23, 2021

Replies: 3 comments 3 replies

MilosPaunovic
Aug 23, 2021

Alam487 Aug 23, 2021
Author

MatthewSH
Aug 23, 2021

Alam487
Aug 24, 2021
Author