Now am using Bootstrap # for an Web Application.
My Application should be Same as in REQUIREMENT
Since am Applied Bootstrap, when i shrink the screen it shows as Responsive, But I really NOT NEEDED.
I need the Sticky Body Content. As Same in NEEDED DEMO
I am sorry if I not understand your question correctly. but you are going to make your website become not Responsive? Then one of the solution that I can suggest to you is to overwrite or reset some bootstrap.css function with your custom css, especially
#media (min-width:somepx){width:your_desired px} with your own liking.
for example this bootstrap css default will define the container responsive size to 750px in case the screen is 768px:
#media (min-width: 768px) {
.container {
width: 750px;
}
for more information, you can read the information from the bootstrap link
Related
I recently made new HTML document in my computer. When I share it with other comp. which has small size monitor then everything is messed!!!
I just wanted to know if I can make a code which changes the width of the items in webpage according to device width...
Then afterwards I thought to use % in width instead of pixels (px). It worked but not how I wanted it . So I still need help...
Thank you!
What you're looking for is media queries. Using media queries you can style your page using CSS based on the page max/min width.
Take a look at this for further info.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Here is an example when a screen has a max-width of 900px and when that is applied the following CSS will be applied. Anything outside of that range will have the above CSS applied
.example {
font-size: 7rem;
width: 75%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
A website designed to change its contents according to how big (or small) the monitor or screen is designed with Responsive Design principles in mind.
Responsive designs can be achieved with CSS media queries. Check out the MDN documentation on Responsive Design here.
I am looking for help in regards to a new website that I have built. I have been building Joomla sites for the last 6 months but this is my first site that I am trying to make responsive based on the media queries that I have added.
The site that I have built can be found at the following:
[http://s116169771.websitehome.co.uk/blingphones_j3/]
I have built media queries for the following sizes:
768px,
600px,
568px,
480px,
400px,
320px
What I have noticed is that I still have issues with some sizes, for example when I view the site on my Samsung S6 the max size for this screen is 640px, so this was causing me issues with a 'box' image that had used which was a png.
I have since changed this into an svg file so that it resizes in accordance to the screen size that I am on. The following is my CSS:
#media (max-width: 767px) and (min-width: 601px) {
#mainbox {
float: left;
position: relative;
background: url(../images/box.svg) no-repeat;
background-size:contain;
margin-bottom: 40px;
}
I have also made sure that the text within the boxes has a width of 100% so this resizes with the box.
The problem I now have is rather than adding more breakpoints, I need to ensure the heading on the page 'WE FIX BROKEN, DAMAGED MOBILE PHONES' resizes like how the box and the text within the box does.
Unfortunately when I am resizing the screen from 767px to 601px I notice a gap appearing under the mobile phone image and I am not sure how to fix this to be honest.
I have looked through the Firefox Developer Tools but just cant figure this out. I also have the font sizes as em and thought this would work in the same way as the svg but this isn't the case.
My current site has been built using the latest version of Joomla 3.8.4.
Would really appreciate some advice on where I am going wrong and what I need to consider to ensure when resizing the page is displayed correctly without adding any more breakpoints.
Sheraz, just to confirm the template already has the bootstrap framework as part of its build. The following is the code in my index.php file.
JHtml::_('bootstrap.framework');
I have read you question and i think the easy and best way of making a website responsive is through bootstrap. In bootstrap there are pre-defined classes you can use to make that thing responsive
For example: To make a image responsive use img-responsive class so it will resize itself according to the screen.
<img src="source" class="img-responsive" width=100% height=500px/>
Except this bootstrap contains grid system you can align them easily.
I hope this will help you
One thing that I notice with your media query styling of text inside the .boxestext1 div is that at narrow viewports, the text is too wide for the actual space, and it overflows the box.
One suggestion is that if you replace your current CSS
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0 32px 0 32px;
width: 373px;
...
}
}
with something like the following, it will scale better at smaller viewports.
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0;
width: 100%;
...
}
}
If you want good results on mobile you can never be too careful about hardcoding widths and other units.
Good luck!
I am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.
The design I'm working on was created for a maximum width of ~950px.
I've checked variables.less and responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.
I also tried adding the following to my style.css:
body {
max-width: 950px;
}
You don't have to modify bootstrap-responsive by removing #media (max-width:1200px) ...
My application has a max-width of 1600px. Here's how it worked for me:
Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.
Inside bootstrap-custom.css, override the container-fluid by including this code:
Like this:
/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
Edit
A better way to do this is:
Create your own .less file as a main .less file ( like bootstrap.less ).
Import all bootstrap .less files you need. (in this case, you just need to Import all responsive .less files but responsive-1200px-min.less)
If you need to modify anything in original bootstrap .less file, you just need to write your own .less to overwrite bootstrap's .less code. (Just remember to put your .less code/file after #import { /* bootstrap's .less file */ };).
Original
I have the same problem. This is how I fixed it.
Find the media query:
#media (max-width:1200px) ...
Remove it. (I mean the whole thing , not just #media (max-width:1200px))
Since the default width of Bootstrap is 940px, you don't need to do anything.
If you want to have your own max-width, just modify the css rule in the media query that matches your desired width.
In responsive.less, you can comment out the line that imports responsive-1200px-min.less.
// Large desktops
#import "responsive-1200px-min.less";
Like so:
// Large desktops
// #import "responsive-1200px-min.less";
Unfortunately none of the above solved the problem for me.
I didn't want to edit the bootstrap-responsive.css so I went the easy way:
Create a css with priority over bootstrap-responsive.css
Copy all the content of the #media (min-width: 768px) and (max-width: 979px) (line 461 with latest bootstrap version 2.3.1 as of today)
Paste it in your high priority css
In your css, put #media (min-width: 979px) in the place where it said #media (min-width: 768px) and (max-width: 979px) before. This sets the from 768 to 979 style to everything above 768.
That's it. It's not optimal, you will have duplicated css, but it works 100% perfect!
I don't know if this was pointed out here. The settings for .container width have to be set on the Bootstrap website. I personally did not have to edit or touch anything within CSS files to tune my .container size which is 1600px. Under Customize tab, there are three sections responsible for media and the responsiveness of the web:
Media queries breakpoints
Grid system
Container sizes
Besides Media queries breakpoints, which I believe most people refer to, I've also changed #container-desktop to (1130px + #grid-gutter-width) and #container-large-desktop to (1530px + #grid-gutter-width). Now, the .container changes its width if my browser is scaled up to ~1600px and ~1200px. Hope it can help.