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.
Related
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>
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 am trying to style the Grid Columns plugin from Justin Tadlock for mobile. Source: https://github.com/justintadlock/grid-columns
In my css file I would like to set the .column-grid .column width for mobile to full, and reset the width for min-width: 768px
.column-grid .column {
float: left;
margin-right: 5%;
margin-left: 0;
}
#media only screen and (min-width: 768px) {
.column-grid .column {
}
}
I tried width: 100% versus width: auto, and display: block versus display: inline. However, it didn't do the trick.
Note, the actual column widths are set within the .column-grid .column wrapper.
Any suggestions on how to do this smartly?
If you're trying to stack the columns vertically on mobile devices and have them display as columns on desktop then change the media query:
#media only screen and (max-width: 768px) {
.column-grid .column {
width: 100%;
}
}
Otherwise I'll need to see your markup in context.
I just imported the plugins CSS into my stylesheet, at
#media (min-width: 48em) { (768px).
I then deregistered the stylesheet the plugin enqueues, as there is no need to serve the same content twice:
function remove_grid_columns() {
wp_dequeue_style( 'grid-columns' );
}
add_action( 'wp_print_styles', 'remove_grid_columns' );
(1 less HTTP request, yay!) I think this is the best way, the only thing is remembering to update my stylesheet if grid columns updates. But as I'm using SASS if the plugin gets updated I'll just chuck the updated columns.css into my grid_columns.scss file.
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%;
}
}
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