6

I have setup the website .It should show as the css setting . The page works when I use the PC device to browse .(it is squeezed a bit when using IPAD )

However , for the smaller screen size device ,like 5.5 inch smart phone .

The webpage structure has been totally changed and squeezed .

I have added the below code in the HTML .But it doesn't work .

Any convenient and simple way to make the page shown with mobile device ,as same as the page shown using computer browser ?(won't destroy my original web layout format)

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 
  
    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">`

Dummy files: https://mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo

Desktop View: enter image description here enter image description here

Mobile View: enter image description here enter image description here

update:

there are some 67 @media in the bootstrap.css something like

@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px)

How should I make change so that I can see the same effect in both desktop and mobile version ?

Community
  • 1
  • 1
evabb
  • 405
  • 3
  • 21
  • look into @media Queries with CSS – Jonny Feb 13 '18 at 02:10
  • @jonny You mean I should delete all the media Queries ? What is the effects after remove? – evabb Feb 13 '18 at 02:44
  • no don't delete them. I would adjust them to your needs – Jonny Feb 13 '18 at 03:04
  • @Jonny Any easy way to override the code to make the mobile layout best fit most of the mobile devices ? – evabb Feb 13 '18 at 03:20
  • @Jonny Please see #Update – evabb Feb 13 '18 at 03:21
  • use seperate @media Queries in your css file and call your file below the bootstrap file so that it changes the default css. so in other words link your bootstrap then your style or make sure if your style is on the same page in the head it is below your bootstrap link. – Jonny Feb 13 '18 at 03:25
  • post your code and ill look at it. Just your css not the bootstrap – Jonny Feb 13 '18 at 03:25
  • @Jonny Please see the Dummy files: https://mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo – evabb Feb 13 '18 at 03:29
  • sorry you will have to post it or create a jsfiddle i don't download files. – Jonny Feb 13 '18 at 03:35
  • @Jonny You may try `https://jsfiddle.net/moonbb/o43wyxsz/2/` But it only include one css file .And I only post one css file -bootstrap.min.css – evabb Feb 13 '18 at 06:04
  • The answer lies in the media query -section of your CSS files, where you can adjust at what resolution a different CSS styling is added. But as a general rule trying to force a mobile device to look the same as a desktop is a terrible idea, as inherently smaller screens make desktop-layouts unusable in small screen devices. This has rather more to do with physical screen and pixel size than the resolution of your mobile device. – Stacking For Heap Mar 01 '18 at 00:13

2 Answers2

3

The main issue to me is that you're using a responsive CSS framework (Bootstrap) with all the @media query based behaviour, but you don't seem to want it to behave responsively (you want mobile to look exactly like desktop).

Ideally if using Bootstrap, you'd structure the page so elements can collapse logically for view on smaller devices. If you don't want this behaviour, it may be better not to use a responsive framework, or only use the grid structure and basic element styling, and avoid all the other more complex components like the responsive navbar.

If you really want to prevent the responsive behaviour, Bootstrap does this primarily based on the width of .container elements. The basic way to get around that is to force .container elements to have a fixed size, rather than change with the @media queries, e.g.:

.container {
  width: 1170px !important;
  /* OR */
  min-width: 1170px;
}

The width can be adjusted depending on what you want to achieve.

If you start with this then work through the code in an inspector (e.g. Chrome Dev Tools) you'll probably see a few other Bootstrap components without .container elements (like the navbar) need a similar rule applied to the top collapsing element.

t-jam
  • 811
  • 1
  • 6
  • 21
  • now I change to :` `.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto min-width: 1170px; width: 1170px !important; } @media (min-width:768px) { .container { width: 750px } } @media (min-width:992px) { .container { width: 970px } }` the mobile view still looks the same – evabb Feb 25 '18 at 11:32
  • 1
    Really hard to say without seeing the actual website code what you have going on. One thing I would suggest is that you don't edit the Bootstrap styles directly - you should extend or overwrite in your own stylesheet. Otherwise it becomes very difficult to work out what issues are a result of Bootstrap's default styles or your own. – t-jam Feb 25 '18 at 21:44
0

Though you've not shared your code on plnkr or jsfiddle buy looking at the images you have shared I tried to code a semantic html for you.

I believe this will give you the basic outline on how to write html using bootstrap for responsive websites.

Suggestions - Never change the bootstrap library css or js, add your custom css file after linking bootstrap.

Plnkr - http://embed.plnkr.co/jCbEtAnxoVDKi9ngSF1L/

sagars01
  • 356
  • 1
  • 9
  • Please see the Dummy files: mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo – evabb Mar 02 '18 at 04:15
  • You may try https://jsfiddle.net/moonbb/o43wyxsz/2/ But it only include one css file .And I only post one css file -bootstrap.min.css – evabb Mar 02 '18 at 04:16
  • @evabb Sorry, can't download the files but I'd suggest you to change the look and feel of mobile view. You may refer to the code I have shared and put in your components based on that. – sagars01 Mar 03 '18 at 17:21