I'm currently working on a padding-bottom hack to prevent content reflow and it works perfect on desktop.
I have a div which has something like the following;
<div style="--imageWidth: 300; --imageHeight: 200;"></div>
And in CSS;
div {
border: 3px dashed magenta;
padding-bottom: calc(var(--imageHeight) / var(--imageWidth) * 100%)}
But on mobile the image looks like the following, it's scaling and there's a large gap between the image and text below.. See image here
Try getting rid of the inline style and stick exclusively to CSS styles. You could use media query to set parameters for mobile view, this would allow you to style 2 versions of CSS, one for desktop (your CSS) and one for mobile (the media query in your CSS).
the following code will produce a blue background, but green on mobile.
/*CSS*/
body {
background-color: blue;
}
#media only screen and (max-width: 600px) {
body {
background-color: green;
}
}
use this same logic to write specific code for your <DIV>. add an id to it and call that in css for your desktop style, then use #media to select that id and modify it on a mobile.
you will be able to test it by resizing your browser. You might also want to look into flexbox, its a life saver for this type of thing and you can write CSS inside and outside of the media query for size specific code.
Hope that answers your question. let us know what you find!
Related
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 have to superimpose a form over an image, and it's not a problem, since with some CSS instruction it is simple. The problem is that I must do it responsively, in a way that with every monitor and resolution the positioning doesn't change and adapt itself.
This is an example: http://www.gruppofas.eu/siti-web/
Positioning the form in the green-bordered box it isn't a problem, but doing it in a way that, when viewing it in different resolutions or devices, it remains inside it, how can it be done?
Thanks
You should use media queries in your CSS file.
Go to your CSS and add this:
#media (max-width: 600px) { - here you add the px**** and it will resize
.YourImage/BoxClassGoesHere* {
display: none;
}
}
You can also check in google for media queries.
I hope that helped you.
So I have a site, and I use developer tools. And view it as iPhone5s view and add media queries in:
#media (max-width: 640px) {
.example {
background: red;
}
}
But when I drag my browser I can see all the elements look normal/good. Then they all mess up and cross over one another. Then it hits the mobile view and goes normal again because of my media queries. How do I get the elements to keep in there positions. Like not lose the margins at the side and all that?
I've set alot of elements to
position: absolute;
And so I can freely move elements about the page is this why?
Thank you!
I'm pretty new to Bootstrap, and I have some issues with my mobile view:
Link: http://bit.ly/1yYmgvI
Now obviously the mobile view is a mess. I'll go through a couple issues I'm having:
The navigation drop down works, but the background is non-existent when clicked.
How do I move the "we design IOS apps" up? I tried the "pull" class but that actually pulled it horizontally, not upwards.
How do I adjust the height of different rows for mobile view? As you can tell, the services height (the white background) needs to be extended much longer, but it's quite short in mobile.
I'm pretty new to this so if you guys could help me out that'd be so appreciated. Thank you in advance!
You simply need to give the background of the navigation dropdown a background-color, like this:
.navHeaderCollapse {
background-color: #222;
}
If you want to minimize the padding, so that you can move the "we design IOS apps" up, you can use a media query at your desired change browser width, which changes the padding. Use it like this:
#media (max-width: 765px) {
.xlg-buffer {
padding-top: 35px;
}
}
The same works for adjusting the heights of the different rows in "mobile view". Just use an according media-query to change the heights. For example like this:
#media (max-width: 765px) {
.row-services {
height: auto;
}
}
NOTE:
All given values are just examples, you need to adapt them to your needs. Use the browser inspector to find out which selectors you need to target and which properties you need to change.
I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?
I think the best thing would be if the items simply moved down as opposed to overlapping.
You can use min-width, as #anjunatl pointed out, or you can use CSS3 media queries.
They let you tweak the CSS for any resolution range you want:
body {
color: red;
}
#media screen and (max-width: 700px) {
body {
color: blue;
}
}
When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.
Add this CSS to the body tag: min-width: 700px;