I am trying to make one website responsive. the problem is that some elements adjust with media queries whereas others keep their native style...
I've tried different css files but no difference..
It drives me crazy 2 days now so if anybody has a clue what happens plz help.
.wrapper {
width:1200px; height:800px;
margin: 0 auto;
clear:both;
}
.image img {
width:1200px;
height:570px;
}
#media screen and (max-width : 240px){
.image img { /* this works*/
width:240px;
height:100px;
}
.wrapper{ /*this doesn't*/
width:240px;
}
}
Related
I have a slick-menu, a logo, and a search element in my top bar. Unfortunately, I cannot figure out how to make them all clickable at the same time within both my tablet and mobile responsive. Because of a z-index, I think they are stacked/transparent--which is the issue. I can only either make the menu + search clickable or the logo. I've tried changing them to inline-block on each element, tried the pointer-events property, and also changing around the z-index values, but nothing has been successful. How do I fix this?
You can view my website here: www.rachelclayton.co
CSS:
#media only screen and (max-width: 767px) {
#top-bar-logo {
text-align: center;
position: absolute;
}}
#media only screen and (max-width: 941px) {
#top-bar-logo {
display: block;
}
#top-bar-logo img {
max-width:60%;
height:auto;
}
#mobile-social {
display: none;
}
#top-bar {
height:40px;
position:relative;
line-height:40px;
background:#ffff;
z-index:99999;
}}
#media only screen and (max-width: 490px) {
#header {
padding-top: 10px;
padding-bottom: 10px;
}
#top-bar {
height:35px;
position:relative;
line-height:35px;
background:#ffff;
z-index:99999;
}
#top-bar-logo img {
max-width:70%;
height:auto;
}
#top-bar-logo {
display: inline-block;
}}
I'm having a hard time understanding this post.
Specifically what does this mean "When I shift it up to the top bar, it becomes un-clickable."? What is "it" as in "shift it up"?
I see in your site you wrapped the <img> with <a> - that is good.
<img src="https://rachelclayton.co/wp-content/uploads/2019/05/RClogo.png" alt="Rachel Clayton" />
Have you tried wrapping the <div id="top-bar-logo"> in the <a> tag as well?
My site: https://www.gameron.pl/
I need to make the theme like in the screenshot for the resolution 719px and below:
I mean posts list of course. I tried to achieve it with various codes, but each works only on one resolution and is not adjusting to other resolutions.
Here's what works:
#media (max-width:719px){
/* Thumbnail Image */
.main a .wp-post-image{
width:50%;
}
}
Now I just need to move and adjust post title properly. Does anyone have an idea how can I do it? I feel like I tried everything.
The problem is your .post-thumbnail has float:none, and your .post-content has float:left.
I changed it in the console so both float:left and width:50% and it works fine:
https://i.imgur.com/Q8BFev0.png
#media only screen and (max-width: 719px) {
.post-list .post-thumbnail {
float: left;
max-width: 50%;
}
.post-list .post-content {
float:left;
width: 50%;
}
}
You can do it as follows:
#media only screen and (max-width: 719px) {
.main .post-list .post-thumbnail,
.main .post-list .post-content {
float: left;
width: 49%;
}
.main .post-thumbnail {
margin-right: 0.5em;
}
}
Result
While using media queries for screen resolutions of tablet and mobile phones, the "sideNav" which contains all the links and the social media buttons on the right hand side does remain floated but the "maincontent" section containing all the content goes down and does not stay up floating the "sideNav". I am not able to understand why? The "sideNav" normally floats on the right of the "maincontent" but it does not on resizing.
The code for a small size desktop monitor :
#media (max-width:1100px) and (min-width:767px){
body{
width:90%;
margin:auto;
}
#body, #wrap{
width:100%;
margin:auto;
}
#maincontent{
font-size:100%;
width:auto;
margin:auto;
border:1px solid black;
}
#header{
font-size:100%;
display:inline-block;
}
#google_translate_element{
display:inline-block;
}
#search{
}
#breadCrumb{
height:1em;
padding-top:1%;
font-size:95%;
}
#navbox{
height:2em;
margin-bottom:1%;
margin-top:2%;
width:100%;
}
#navbox li{
margin:none;
font-size:95%;
}
#sideNav{
width:30%;
padding:0;
border:1px solid black;
}
}
The page with the problem : http://analyzedstock.com/testing/basics-of-stock-market.html
CSS : http://analyzedstock.com/testing/main.css
Please resize the browser
The problem caused by rule: #header { width: 100%; }
Please try to remove or adjust it to make site work properly in smaller screens.
Does anybody have an idea why my media queries is not working. I want my image to stay to 1000px (which is the original image size) when it detect the screen 1000px or more.
Here's my code:
CSS:
.header
{
height:100px;
width:100%;
}
.header img
{
width:100%;
}
#media screen and (min-width:1000px;)
{
.header
{
height:100px;
width:1000px;
}
.header img
{
width:1000px;
}
}
HTML:
<div class="header">
<img src="/common/media/images/some-image.jpg" />
</div>
Just use css's max-width to set the max size of the image. Then it cannot be bigger than the original size.
So remove your media query, and simply use this:
.header {
height:100px;
width:100%;
}
.header img {
width:100%;
max-width: 1000px;
}
Replace 100% with
.header img
{
max-width:1000px;
}
I'm new to using media queries, and I've got some working but others aren't (and I can't explain why!) First of all, the site in question is at http://thermal-lab.com. I'm trying to have the logos in the top grey banner resize once below 700px width (which is working) and then resize again at 515px width (which is working).
BUT, I also wanted to double the height of the grey footer bar (called second-footer) at 700px, which isn't working. Any help would be very much appreciated!
This is the relevant CSS:
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
display: inline-block;
}
.second-footer-wrapper {
max-width: 980px;
height: 35px;
margin:0 auto;
padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {
position: relative;
float: left;
}
.second-footer-wrapper .right {
position: relative;
float: right;
}
This is the code in my media query for 700px:
#media screen and (max-width: 700px) {
.wrapper .ut {
width:185px;
padding-top:4px;
}
.wrapper .csd {
width:65px;
padding-top:3px;
}
.wrapper .utsoa {
width:186px;
padding-top:2px;
}
.second-footer {
height:70px;
}
.second-footer-wrapper {
height: 70px;
}
}
So with what you have provided for code. The first thing I could suggest would be to make sure that all of the .second-footer css is inside the media query brackets. like so:
#media screen and (max-width: 700px) {
/* SECOND FOOTER */
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
display: inline-block;
}
.second-footer-wrapper {
max-width: 980px;
height: 35px;
margin:0 auto;
padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {
position: relative;
float: left;
}
.second-footer-wrapper .right {
position: relative;
float: right;
}
/* OTHER STUFF */
.wrapper .ut {
width:185px;
padding-top:4px;
}
.wrapper .csd {
width:65px;
padding-top:3px;
}
.wrapper .utsoa {
width:186px;
padding-top:2px;
}
.second-footer {
height:70px;
}
.second-footer-wrapper {
height: 70px;
}
}
please try that. Also I did not account for any CSS that will overwrite itself. The height would never reach 35px in this example.
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer {
height:70px;
}
This is all about selector strength and specificity. A rule being defined within a media query does not give it greater specificity. Since your media query stylesheet appears earlier in the document, it has lower specificity.
Here are two ways you can correct that:
Move your media query stylesheets later in the document.
Increase the specificity of the selectors in your media query rules.
This can be as simple as changing the selector for the media query rules to any of the following:
html .second-footer
div.second-footer
* .second-footer
Give a man a fish vs Teach a man to fish
This problem was simple to solve. Here's how I did it:
Open thermal-lab.com in a browser with a width less than 700px.
Hit F12 to open up developer tools. This works in any browser except FireFox without FireBug. F12 opens FireBug, but you have to install that separately. To open FireFox's built-in developer tools, use the menu.
Locate the element in source whose style is not being applied as expected.
Look at the style inspector for that element.
Notice that the height definition in the media query rule has been struck? This tells you that the element did match the rule, but a rule with greater specificity also defined height. Notice the default rule lists height as well. The lack of strikethrough tells us that this is the rule that was applied.
Both rules have the same selector. The tie breaker for rule specificity is document order. Rules appearing later in the document have higher specificity.