I am currently creating a website that has media queries. I already have a normal navigation however when the webpage size reduces to a mobile size, I would like for the navigation to switch to another navigation bar which I have created, which includes icons which makes it easier for mobile users
#media only screen and (min-width : 50px) {
<div class = "navbar">
<img src="Images/houseicon.png"/>
<img src="Images/educationicon.png"/>
<img s**strong text**rc="Images/contactmeicon.png"/>
</div>}
You don't need to add html to media query...
Html is part of html page
You just need to set below css with media query in your css file or in your tag.
#media only screen and (max-width : 767px) { .navbar a img{ width:50px !important; height:50px !important;}}
Use below code to show navigation properly on responsiveness mobile view.
Code::
`#media only screen and (min-width: 320px) and (max-width: 480px) {
.nav img {
height: 100px;
width: 100px;
}
} `
Note:: height: 100px; and width: 100px;
100px, is just for reference, please update height and width with your actual image size.
Related
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
Good afternoon, I am making a page layout using tables on HTML, but there's an issue that I'm stuck with. One of the instructions is that the images resizes according to the screen size, but I'm not allowed to use JS or CSS, only HTML. I have an idea on how to do it with CSS, but I'm not allowed to use it.
What I've tried until now is:
<td width="35%" height="10%"><img src="https://blog.udacity.com/wp-content/uploads/2020/06/HTML_Blog-scaled.jpeg" width=100% height=100%></td>
The problem is that the height in the <td> doesn't seem to change anything. The goal is that the image proportionally resizes, not getting like too thin or too large depending on the screen size.
For Mobile
#media screen and (max-width: 540px) {
img {
width: 50px;
height : 50px;
}
}
For Tablets
#media screen and (min-width: 540px) and (max-width: 780px) {
img {
width: 80px;
height : 80px;
}
}
This page https://affliates2.blogspot.com/p/blog-page.html is my contact us page only displays content in right half of the page on mobile but it appear properly on desktop.
It display their content in only half of the page while leaving the other half blank on all screen sizes. I have tweaked my HTML source code and couldn't get what's causing this.
I am using a responsive template, I'm confused why this error should occur.
please help me
Because you have media query which works on viewport width < 760px (mobile)
#media screen and (max-width: 480px) {
.post {
width: 41%
}
}
#media screen and (max-width: 568px) {
.post {
width: 28.5%
}
}
#media screen and (max-width: 760px) {
.post {
width: 29%
}
}
Just remove this css selectors and page will look fine
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
I am using a wordpress responsive theme, however I need the footer to not appear on any screen size smaller than an ipad. When viewed on an iphone 5 size screen the footer is too bulky and on some pages covers the content. In this instance it would be much neater to remove this for mobile phone size screens. Is there a CSS command, or any alternate method, to remove the footer below a certain screen size?
Many thanks in advance, Phil
I would say :
#media (min-width: 0px) and (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
Or shorter :
#media (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
A CSS media query should work
#media only screen and (max-width: enter breakpoint) {
#footer {
display: none;
}
}