Edited to add, so no one else posts this as an answer: I already have a viewport tag in my code.
I have read many of the responses here to similar questions, and I'm sure my problem probably lies somewhere in the order that my queries are declared in, but I can't for the life of me figure out where.
Bootply example here.
I have two divs, one that should display in wide layouts, and one that should display in narrow layouts.
<!-- for small layouts -->
<div class="container-fluid slogan text-center" id="home-slogan-container-small">
small
</div>
<!-- for 800 px and wider -->
<div class="container-fluid slogan text-center" id="home-slogan-container-large">
large
</div>
(These are very stripped-down; the actual content has different layouts inside the divs.)
The problem I'm having is that, no matter what size I scale the browser to (tested in FF using ctrl-shift-m to get mobile view, and in Chrome using the mobile view button in the dev tools), the small layout displays.
Here's my css:
#home-slogan-container-small {
padding-top: 15px;
text-align: center !important;
display: none;
}
#home-slogan-container-large {
padding-top: 15px;
text-align: center !important;
display: none;
}
#media only screen and (max-width: 1500px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
#media only screen and (max-width: 1200px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
#media only screen and (max-width: 960px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
#media only screen and (max-width: 800px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
#media only screen and (max-width: 799px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
#media only screen and (max-width: 420px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
#media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
I'm a PHP/mySQL developer who's had a bootstrap site dropped on me; CSS is not my strong suit. Any explanation would be appreciated.
Here's the problem
#media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
it's min-width... meaning anything with width greater than that (e.g. all browser) will have those properties be true. Change it to max-width and you'll be fine.
Edit: all of the below is true, but not the cause of #EmmyS problem. Solution is above.
I recently had this issue with Foundation, and I suspect bootstrap has the issue too. your html is probably missing a meta declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">
add that into the head of your HTML and it will probably work fine. The reason you're having this problem is because the mobile browser is deciding "okay, I don't know how to display this website, so I'm going to scale it as if I was a large browser, even though I'm not."
you have to remove the last media query
#media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
the reason is, that this last is the only with min-width rule and overrule that all before (except in the case of wieport < 300px)
Rewrite all styling like this:
/* Styles for size 0px - 799px */
.small {
display: block;
}
.middle {
display: none;
}
.large {
display: none;
}
/* Styles for size 800px - 1200px */
#media (min-width: 800px) {
.small {
display: none;
}
.middle {
display: block;
}
.large {
display: none;
}
}
/* Styles for size 1200px and more */
#media (min-width: 1200px) {
.small {
display: none;
}
.middle {
display: none;
}
.large {
display: block;
}
}
I choosed 800px and 1200px as the breakpoints. You can modify them or add new ones.
Related
I would like to show the "info" div (the black box with the white text, that gets visible on mouse hover on the image), but ONLY on mobile and WITHOUT the hover effect.
Tried the following way:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
.image-hover-page-container.animatedParent.info{
display:block !important;
}
}
my site: link
source code: link
For show on mobile, add these elements to active CSS file:
#media (max-width: 767px) {
}
.ih-item.square.effect3.bottom_to_top .img {
transform: translateY(-50px) !important;
}
.ih-item.square.effect3.bottom_to_top .info {
transform: translateY(0) !important;
visibility: visible;
opacity: 1;
}
}
At first I noticed the font sizes are large on the site and uncomfortable inside each article
I tried customizing the CSS file
To write a code that makes fonts smaller
for paragraphs and sub-headings
H2، H3
I tried some articles and found that the fonts have really changed and become smaller
But the problem is not all the fonts in some articles, the problem remains the fonts are in large sizes and have not changed
What is the cause of the problem and how can I set all the fonts in all articles smaller than the original size
See the picture that shows you a check mark
This has the fonts changed successfully, while the other picture has the font not changed
Then see also the code and a picture of where the code was modified
body {
font-size: 16px !important;
line-height: 35px !important;
}
.default_logo,.logo-sticky,.logo-mobile{
height: 110px !important;
}
.fullwidth-wrapper {
padding: 15px 30px;
}
#media only screen and (max-width: 1200px){
.wgl-theme-header .wgl-mobile-header {
display: block;
height: 120px;
}
.default_logo, .logo-sticky, .logo-mobile {
margin-top: 10px;
}
h2 {
font-size:24px !important;
}
h3 {
font-size:20px !important;
}
h4 {
font-size:18px !important;
}
}
Can't change the size of all fonts in wp
My website is www.rosstheexplorer.com.
The following code is in my header.php
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
The following code is in Additional CSS
#media screen and (min-width: 660px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
There is usually white space above the header image when viewing the site on desktops. It almost seems as if the white space stays even when the mobile image does not appear.
How can I ensure that there is never any gap between the header image and the top of the page.
Thank you
You have the following media query in custom-css:
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 400px auto;
padding: 54px 108px;
}
}
The 400px margin is responsible for your header image being pushed so far down the page. Simply remove this to ensure that the header stays at the top of the page.
Alternatively, you can use the shorthand margin of margin: 0 auto 400px; if you would like to keep the margin at the bottom, but remove the marign at the top.
Note that you also have a padding of 54px. If you would like it flush up against the top of the page, you can remove the padding as well, or use padding: 0 108px 54px; to only pad the bottom.
Hope this helps! :)
There is a margin in your .site-Class. It also seems that theses styles are duplicate in different files of your CSS (style.css and a ?cached? custom-css) .
Change your CSS and it should be as expected:
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 0 auto; /* change to this value or remove this line, it's already inherited from style.css:967 */
padding: 54px 108px;
}
}
Thank you for your suggestions.
In Additional CSS I had
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: 400px auto;
padding: 54px 108px;
}
}
I have now changed it to
#media screen and (min-width: 75em) {
.site {
max-width: 1153px;
margin: -50px auto;
padding: 54px 108px;
}
}
I ran in to an issue.
I've made a custom sidebar for a website. this includes a search, a category list and a pricing option.
As you can see up here, it shows it perfectly when inspecting on google chrome.
But when I open the same page on my phone, it does not show up anymore.
This sidebar is supposed to be shown by using the following custom css :
#media only screen and (max-width: 759px) {
#sidebar {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (max-width: 759px) {
#sidebar-3 {
display:block;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_search_widget-8 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_price_filter-10 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_categories-4 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
Which basically makes sure that on the desktop it has the sidebar on the left (sidebar). Which it hides on phones/tablets and such. And on phone it has the sidebar-3 on the top which is hidden on desktop.
As you can see I even tried to do it by showing sidebar-3 by adding display:block. Sadly to no avail.
I'm using the same code on two other website's, where they work perfectly.
Does anyone have any idea what might be going on here?
I have a few PDF files that were converted to HTML. I fully understand that this isn't ideal, but that's not something I can change.
The issue is that it places content at very specific points which breaks mobile responsiveness.
A typical HTML will looks like this:
<div class="pc pc1 w0 h0">
<div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div>
</div>
And the CSS file like this:
#media screen and (-webkit-min-device-pixel-ratio:0){
.sc_{-webkit-text-stroke:0px transparent;}
.sc0{-webkit-text-stroke:0.015em transparent;text-shadow:none;}
}
.ws0{word-spacing:0.000000px;}
.fc0{color:rgb(35,31,32);}
.fs0{font-size:168.000000px;}
.y0{bottom:781.000000px;}
.h0{height:841.889770px;}
.w0{width:595.275630px;}
.x0{left:34.000000px;}
}
Is it possible to somehow make it scale? I'd even be happy(-ier) if I could just apply a media query to reduce everything in size by 20%.
As it appears from the posted CSS, position: absolute is used, so I can't see any other solution (yet) than using transform: scale() (if not to rewrite the html of course)
By using media query it could look like this
.outer {
height: 500px;
width: 800px;
background: red;
transform-origin: 0 0;
}
#media screen and (max-width: 1000px) {
.outer {
transform: scale(0.9);
}
}
#media screen and (max-width: 900px) {
.outer {
transform: scale(0.8);
}
}
#media screen and (max-width: 800px) {
.outer {
transform: scale(0.7);
}
}
height: 400px;
width: 600px;
}
<div class="outer"></div>