Can someone take a look at my website and help me fix how a section looks while viewed on a mobile device. The "Thousands of Canadians" and "Mobile Search" sections on the homepage are not responsive like the rest of the page. Any help would be greatly appreciated.
Below is the CSS i have inserted so far:
#media all and (max-width: 640px){
#site > .wrapper, #footer > .wrapper {
margin: 0;
padding: 40px;
width: auto;
}
}
www.jobspark.ca
I don't think you are targeting the right part, if you look at the columns those are in, there are .myLeftColumn and .myRightColumn divs that have the original percentage widths. Try changing both of those to 100% width when the screen is smaller than 640px or whenever you need a breakpoint.
#media all and (max-width: 640px) {
.sqs-block-content .myLeftColumn,
.sqs-block-content .myRightColumn {
width: 100%;
}
}
Related
I have created my portfolio for graphic design on the url sebastianpettersson.se. The theme I’m using is called Lekker by Code Interactive. I have searched their support forum but sadly not found any solution to this issue.
My issue is:
I would like to have my logo horizontally centered when my visitors is viewing my page on smartphone or tablet. I’m somewhat a semi novice when it comes to css but tried using this code for it but it sadly does not work.
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
text-align: center !important!;
}
}
(Note that I’m also using a code to hide a button on smartphone and tablet but I’m pretty sure it’s not interfering with it). Posting it to incase that is causing an issue.
#media only screen and ( max-width: 993px ) {
.qodef-m-lines{
display:none !important;
}
}
Any ideas or suggestions?
Set width100% and margin-right: auto; margin-left: auto;
#media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
You can center your logo by setting margin-left to auto, as it already uses margin-right: auto:
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
margin-left: auto;
}
}
First, I want to be clear that !important! doesn't work you should use !important with only one!
Second, you can use margin: 0 auto; to center images,
Third, use flexbox:
display: flex;
justify-content: center;
Tip, try using
#media only screen and (min-width: 450px) for small devices {}
#media only screen and (min-width: 800px) for bigger devices {}
#media only screen and (min-width:1100px) for even bigger devices {}
#Robo Robok 's solution is the way to go. You could also try learning more about positioning and layouts by experimenting with display: flex.
The following change to your header will also work, if you want to alter the position of your collapsible menu too:
#media only screen and (max-width: 993px) {
#qodef-page-mobile-header {
display: flex;
justify-content: center;
}
}
Also, you should have a look at your collapsible menu not appearing below 994px of resolution.
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
i'm trying to get an good looking centered navbar. But my created navbar is a piece of crap.
Look at this, this is how it looks like at full resolution: https://cloudup.com/coWac-6mcbd
.. now lok at this: https://cloudup.com/c-jZHiJhlR1
This bug happened at a screen resolution of 1240px. What the heck is that?
.. and at a resolution of 1214, it breaks correctly to the toggled navigation.
I have used this code / media queries:
#media only screen and (min-width: 1227px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
}
}
#media only screen and (max-width: 1213px){
.navbar-nav{
float:none;
margin-left: -15px auto;
display: table;
}
}
#media only screen and (max-width: 1213px){
.navbar-nav > li {
margin-left: -15px;
}
}
So, what can id do? I'm clueless.
I'm not sure if this is the only problem. It might help to see your html, too. However, you've got:
margin-left: -15px auto;
The margin-left property takes only one value.
I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?
Set the width and height on the img tags to be percentages (of their container):
<img src="http://..." alt="" width="50%" height="30%" />
Adjust percentages to your needs.
Use media queries.
e.g:
#media all and (min-width: 1001px) {
img {
width: 100%; /* insert prefered value */
height: auto;
}
}
#media all and (max-width: 1000px) and (min-width: 700px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
Try this
img
{
width:100%;/*adjust this value to your needs*/
max-width: the size of the image;/* so it wont get bigger and pixelated*/
height:auto;
}
another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.
here is a fiddle to see if this is what you are trying to achieve