I am very new to HTML and i am trying to make my website responsive. I chose this template from templated.co . I made some changes and gave credits to them for design. And after everything when i check for responsiveness its not responsive in mobiles/ipad. We can download the code directly from templated.co . Can any one please help me make my website responsive?
It seems the template does not come with media queries (specifications in the CSS that allows content to adapt to screen resolution). You'll need to code those yourself, as they are specific to the CSS used. Try searching for media query tutorials on youtube if you're unsure of how to code them. Also, check out this template. (You don't need to use all of the queries, but the more you use, the more flexible your site will be)
#media screen and (max-width: 699px) and (min-width: 520px) {
ul li {
padding-left: 30px;
background: blue;
}
}
An example query would look like this. Max and min define the boundaries of how the site will change under restriction, and are always in pixels. This is saying that ul and li will have 30px padding and a blue background if the screen-size pixel conditions are met. For every phone/tablet size, you need a new media query with new specifications.
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 creating a webpage using only CSS & HTML
Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.
How do I fix this ?
Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.
The solution:
Media queries:
With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.
#media (max-width: 979px) {
.h2 {
font-size: 10px;
}
}
This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the #media rule has.
Media queries w3cschools
tip:
You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)
If you have any future questions please let me know I will explain some more about media queries.
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've been working with a page which has two layouts dependent upon the width of the device being used to view the page:
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
}
This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.
My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements. Thus, does a method similar to the CSS media query exist for HTML? Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?
EDIT: A better approach, at least as far as images and graphics are concerned, is likely to use CSS to define the image rather than the HTML. Thus, instead of doing:
<div id="img"><img src="URL"></div>
...and trying to hide the div, you would instead take this approach:
<div id="img"></div>
and...
div#img {
background: none;
}
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
div#img {
background: url(URL);
height: 400px;
width: 600px;
}
}
Thus, the mobile version doesn't load the images and we're still only using CSS.
Or alternatively, is is there a way to define two different HTML
layouts based on the width of the device the page is displayed on?
Thats the route to take imho. HTML doesn't have a similar mechanism to define different rulesets for viewports.
I think there are some js options. Does this conversation help?
What is the best way to detect a mobile device in jQuery?