I am working with a Squarespace template and would like to fix up a few things while viewing my website on a mobile device (iPhone). www.jobspark.ca is my website.
Here is the code I tried and didnt have any luck with.
/* ----------Add your custom styles here for Mobile---------- */
#media only screen and (max-width: 640px) {
.desc-wrapper { font-size:24px;
}
}
I have attached an image to help demonstrate what I am trying to fix. Thanks
The font size is set with .desc-wrapper p so would need to change the size with:
#media only screen and (max-width: 640px) {
.desc-wrapper p {
font-size: 24px;
}
/* Changes bottom headline */
.sqs-block-content h1 {
fonts-size: 18px;
}
}
Related
I'm working on my personal WordPress site, and when using media queries in the WordPress theme customizer, my site does not respond to the changes I've made to the background.
I am running the Divi theme, and used Chrome's inspect element to find which class I need to be changing.
#media only screen and (max-width: 768px) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I expect the background of each page to change to "echelon-enterprises.jpg" on desktop, and to "mobile-floor.jpg" depending on the screen size. What am I doing wrong here? Am I just targeting the wrong class? I have also tried the "et-main-area" class, still not luck.
You're missing px for the second declaration
#media only screen and (max-width: 768px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I'm trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and it goes down to about 2/3 of the page and the rest of it is blank. I would rather it be gone entirely. How can I get rid of it. Here is how I am setting it:
body {
font-family: Helvetica;
font-size: 1.8rem;
background-color: #000;
margin: 0 auto;
background-image: url("../images/myimage.jpg");
background-repeat:no-repeat;
background-position:center top;
background-position:no-repeat;
background-attachment:fixed;
}
what I tried
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
Try a media query!
/* standard*/
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
/* orientation */
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
You will want to use a media query here, but you want to focus on max-height (not width... which is what media queries typically focus on, eg, http://unmatchedstyle.com/news/height-based-media-queries.php)
#media screen and ( min-height: 1080px ){
body { background-image: none; }
}
You should probably spend a bit of time learning about mobile responsive design in general, specifically because the media queries can come in handy with problems like yours. This is a very good place to start reading about them: http://alistapart.com/article/responsive-web-design/
Also note that certain JS plugins (eg Backstretch for example) stretch your image to whatever the background size happens to be... that might be another thing to look into, if you are interested.
Give the element containing the background image an id attribute then use that id attribute to assign the style to the background using an if statement with JavaScript.
<script>
var element = document.getElementById("elementHoldingTheBackground");
if (1080 < window.innerHeight ) { // returns a number
element.style.display="none"; // hides the element with CSS
}
</script>
That's the most simple way from the top of my head but I'm sure there are better ways to do it!
I'm also no expert. Please don't cook me over this. I'm only 18. I'm new to this!
Please tell me what you think.
I have used the following css code to decrease the font size of a slider heading:
.swiper-slide .content h2 {
font-size:48px;
}
It seems to have worked fine when viewed from a desk or laptop, but the text is over sized when viewed on a smart phone.
I am using windows 7 on a PC, wordpress CMS, responsive theme...
Using font-size in % should help you to change size relatively. But you should keep in mind line-height property.
You could try media queries?
html { font-size: 62.5%; }
body { font-size: 1em;}
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Try this :) http://jsfiddle.net/yv5eu/
Try this technique for better resizing of text. Than with media queries you can set different font sizes.
http://snook.ca/archives/html_and_css/font-size-with-rem
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
Support: http://ahedg.es/w/rem.html
I want to get the screen width as a variable for a simple if statement. Basically if the screen is > 768 it will display the normal website. If it's < 768 than it displays a more compact version. It's just a little fix for ipad resolution. I already know how to update the webpage once i get the info, just how do I get the values in the first place?
use javascript..
there is a property called
.screenwidth()
here is a link:
http://www.w3schools.com/jsref/prop_screen_width.asp
You could use CSS media queries:
#media all and (max-width: 768px) {
body {
background: #ccc;
}
}
Further reading:
http://css-tricks.com/css-media-queries/
You need CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Any CSS for bigger screens / default CSS goes outside the brackets */
div {
/*here*/
}
p {
/*or here*/
}
#media screen and (max-width: 768px) {
/*css specific to small screens under 768px width here*/
div {
/*here*/
}
p {
/*or here*/
}
}
I am trying to hide titles in the mobile version of my blog (on blogger). I am trying this code in Advanced CSS but it is not working.
.mobile-index-title.entry-title { display: none; }
Similarly if you do that for regular blog posts it work as suggested here
You have to go to template, under mobile click the setting button (wheel like), then select custom and save.
Then when you add the following line your title won't appear on the mobile site anymore:
.mobile-index-title.entry-title { display: none; }
If you don't select custom, blogger won't parse your Advanced CSS section when showing in mobile mode.
You have to put it inside a #media query. Something like
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.mobile-index-title.entry-title { display: none; }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.mobile-index-title.entry-title { display: none; }
}
/* Landscape phones and down */
#media (max-width: 480px) {
.mobile-index-title.entry-title { display: none; }
}