when the browser is resized to the mobile sized screen, the two columns in property of col-xs-12 are displayed without any gap.can anyone show how to fix this?
when viewed in large size
when viewed in small size
You can add a media query of your own. So give the bottom one a class like "small-margin-top" and then add this to css:
#media all and (max-width: 700px) {
.small-margin-top{
margin-top: 3em;
}
}
Adjust this to your liking and specifications. I know that bootstrap uses "min-width" instead of "max-width" like I showed you. So do your research on that end to make sure it flows but it should work regardless.
Related
I recently started building sites with bootstrap and ran into a problem while creating http://en.arecotechnology.com/gunassembly.html
When the screen is minimized, the photo does not fit on the screen. The same goes for other pages on the site, including http://en.arecotechnology.com/spe2018.html (The image overlays the text when the screen is minimized)
I tried playing around with the div but nothing seems to be working.
If someone can give me a hint as to what I should do, it'd be greatly appreciated!
Try maybe changing the width so that it's 80%. That way it will always be at most, 80% of the screen width.
All I can provide with the given information. The links are dead, 404, same as Fecosos^^^
Try this too with media rules:
#media screen and (max-width:480px) {
.cupcake img {
width: [insert desired with here for certain size];
}
}
To make <img> take the maximum width of the parent add the class img-responsive (Bootstrap 3) or img-fluid (Bootstrap 4) to the images.
<img class="img-fuid img-responsive" src="/images/my-image.jpg">
img-responsive and img-fluid is a Boostrap utility that adds max-width: 100%; and height: auto; to the image. With this 2 properties you cover the majority of images problems, not allowing images to be wider that its container. Check Bootstrap's documentation, it has lots of helpful classes.
And add some media queries or again use bootstrap media queries helpers.
Try this without using a media query in your css file or style tags:
img {
max-width: 100%;
}
In theory this should work because it becomes 100% of the screen size (not 100% actual size). So the max width will just stretch to 100% of screen size instead of scrolling off.
You might need to include other css, but this code is used widely for bootstrap-based sites in conjuction with other properties.
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'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
I'm using bootstrap 3 I want to use col-xs-12 on an element but on all other displays I want the element and any following elements to use auto width on any larger displays.
I think the answer is media queries but I couldn't find any answers on this issue.
maybe something like col-sm-auto
EDIT: I hope I can properly explains this.
Let's say you have an input and a couple of labels on the page
Now in xs view I want the labels to drop to a new line, to do that I can set the input to col-xs-12 but that will not give the required results on large displays
Can you see how the width of the input is auto in the first image
You could try to add something like
#media (min-width: #screen-sm-min){
.col-sm-auto {
display: inline-block;
width: auto;
}
}
and then add this class to you element.
Or the second approach would be to have two different placeholders for different kind of screens.
For example:
<div class="col-xs-12 visible-xs-block">Some content for extra small screens</div>
<span class="hidden-xs">Some content for small, medium and large screens</div>
I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/) combined with elements of HTML5 boilerplate to help get me started.
Here's what I've got at the moment: http://pftest.comyr.com/grid/
One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.
After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: #media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)
The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (#media (max-width: 22em), #media (max-width: 320px) ect.
I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.
The CSS in question is:
#media (max-width: 22em) {
#workgrid {
width: 100%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
}
Which is applied to each of the DIV "col-1-3" classes.
As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)
The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.
For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.
Here are two links that maybe help you to understand fluid elements better:
Fluid images
max-width
To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.
Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:
#media (max-width: 22em) {
to this:
#media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that
Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.