My wordpress theme and the plugins I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:
#media (min-width: 680px) {
.home-background .textwidget {
font-size: 50px;
font-style: normal;
font-weight: 500;
letter-spacing: 8px;
font-family: 'Roboto';
min-height: 880px;
padding-top: 20px;
}
}
#media (max-width: 679px) {
.home-background .textwidget {
padding-top: 20px;
padding-bottom: 175px;
font-style: normal;
font-weight: 500;
font-family: 'Roboto';
}
.site-content {
height: 0!important;
}
#footer-banner {
padding:50px;
}
}
I was wondering if anyone could help me figure out how to rescale my images and text correctly for ALL devices instead of having to figure out media queries for every device there is. I appreciate it!
Start with the smallest screen size imaginable then expand the viewport until it looks like crap. Put a breakpoint in. Repeat process until you reach largest screen size you want to accommodate. I think Dave Rupert said that somewhere. Anyways short answer is don't use media queries based on popular devices but instead based on your content. There is no easy answer.
Related
I just want to change font behaviour based on the website, how to add if - else condition in css.
My CSS :
td.email-heading h1 {
font-weight: 700;
font-size: 16px;
margin: 1em 0;
line-height: 20px;
text-transform: uppercase;
}
If website 1 font-weight: 700 should work, if website 2 should not work.
CSS does not have IF, else functionality built in. you can use JS jQuery as easy alternatives.
depending on what condition needs to be met (as it was not specified in the question) #media might be a solution for you in case the condition is screen dimensions.
more on #media here:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
Problem = Text overflowing container with Zooming (CMD +).
Before zooming =
After zooming =
The following solves it, but I am very reluctant to accept ViewPort units because of their lack of full support by all current Browsers, not to mention the legacy Browsers:
html {
font-size: 16px;
font-size: 2.4vw;
}
Another much more serious problem with ViewPort units is that they obviously scale with window size and I do not wish to do that.
I wish:
(1) nothing to happen to the font-size with window resizing.
(2) ... but I do wish the font-size to decrease such that the above container overflow does not happen with zooming.
(3) avoid Javascript and CSS #media Queries if possible.
Here's the appropriate code:
HTML -
<div id="roundedTextCorners" class="centerBlockContents">
<div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>
MY LOVE SONG FOREVER!!
</div>
</div>
CSS -
#roundedTextCorners {
border: 0.3125em #994c00 solid;
border-radius: 0.625em;
padding: 1.0em 1.0em 1.0em 1.0em;
background-color: #994c00;
color: #fff;
}
.centerBlockContents {
text-align: center;
}
.headerText {
font-family: Georgia, Helvetica;
font-size: 1.60em; /* at the top level */
color: #fff;
padding: 1.0em 1.0em 1.0em 1.0em;
}
Any ideas ??
First and foremost, thanks Mr. Lister, for sticking with me on this challenge.
I finally I decided on a "solution" I was happy with. Inevitably, I decided a max-width had to go somewhere, either in the <body> or in #media. I chose #media because I concluded I despised horizontal scroll bars more than the jerkiness inherent to #media.
I’m using vw on font, padding and margin sizes. I design mobile first. Everything looks good up until around 700 pixels, at which point fonts start too look far too big.
I would like to ensure that fonts don’t grow larger than a specified value. Is it possible to set max font size?
Here's some example code where I use vw. But after 700px it starts to look too big to read comfortably.
#intro h1 {
font-weight: 700;
font-size: 8vw;
}
My only thought was to use a media query and specify a pixel font size but that seems like the wrong tool for the job. I would have to create media queries for all elements that use vw units.
Any advice?
There is no such things as min-font-size or max-font-size.
Use media queries for this case;
Expand the snippet to play with it.
#intro h1 {
font-weight: 700;
font-size: 8vw;
}
#media screen and (min-width: 700px) {
#intro h1 {
font-size: 3.5rem;
}
}
<div id="intro"><h1>Coucou</h1></div>
You can use min() / clamp() for this.
eg.
font-size: clamp(1.5rem, 2.5vw, 4rem);
There are examples here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "Sales" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the sales text is going far left for some reasons (on different screen) which is not I want. I want it to be on the top of hands image as depicted in the FIRST IMAGE.
The CSS codes which I am using for the sales text are:
.sales .text1 {
padding-left: 450px;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.
You should use relative measurements like percentage,etc to avoid this, additional you can use media queries to have a different behavior depending of many factors like the screen width
Awesome question, you want to make your webpage responsive.
check out that link, I believe it has exactly what you are looking for.
https://www.w3schools.com/css/css_rwd_intro.asp
In your CSS, I have changed padding-left: 450px to 0 value and added text-align: right so that See More link will not be cut-off.
.sales .text1 {
padding-left: 0;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
text-align: right;
}
The website is freetorun.net in wordpress. When viewed on mobile devices the gold "Sign up" button is not centered on the screen.
I was thinking that changing the font-size to 14px in the CSS would fix it:
.large.custom-button span:visited {
font-size: 14px;
padding: 9px 14px 9px;
}
This code is not working though.
The target HTML is this:
<a class="large custom-button align-btn-right" href="http://freetorun.net/wordpress/choose/" title="Register Today!"><span style="background-color:#DAA520; color:#26354A">to start running faster, farther and<br> injury free SIGN UP for a clinic!</span></a>
Your layout on mobile has lots of issues with padding and floated elements. Changing the font size won't help with positioning.
Firstly the div with class social_media_top widget_text substitute_widget_class should probably be full width, and text-align: center;
You also need to remove the float: right on the gold button.
For the record, I did not solve this. And the code provided above didnt either. But the guys who wrote the U-Design theme gave me this and it is much better.
#top-elements .social_media_top {
clear: both;
float: right;
margin-left: -150px;
margin-top: -20px;
padding: 0 20px 0 0;
}
/* Mobile Screen ( smaller than 480px )*/
#media screen and (max-width: 480px) {
#top-elements .large.custom-button span,
#top-elements .large.custom-button span:visited {
font-size: 14px;
}
#top-elements .social_media_top {
padding: 0;
}
}