I'm looking for an help with a little challenge (for me a big one): I need to center align the logo of this header ( https://mastercanapa.com/ ) on mobile version... I tried every solution found online, but nothing helped. Someone can help me with this?
Add to your css or style tag:
#media (max-width: 620px) {
.btLogoArea {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
}
.btMenuVertical .btLogoArea .logo {
float: none;
display: inline-block;
}
}
Normally mobile design visible when browser width lower then 768px, but in your website mobile design visible when browser width lower then 1200px. So just add below CSS in your style.css file.
#media (max-width: 1200px) {
display: flex;
justify-content: center;
float: none !important;
}
Try this i hope it'll resolve your issue. Thanks
Related
I am getting Mobile view issue, whenever I am loading the website it is going in the right direction. Every section is equal sized but dont know why this is happening. This problem is only with iphones..
I tried adding this code:
body{
overflow:hidden;
}
but it is also not working. Please help me solving this issue.
website link:
http://demo.lamppostmedia.in/arklan1
I have inspected it on iPhoneX which device width is 375px.
and you are giving width: 400px; to wrapper, which is creating horizontal scroll bar.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
width: 400px;
margin-top: -90px;
}
you can use it like below.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
max-width: 400px; // modified
width:100%; // added
margin-top: -90px;
}
I have a wordpress site dishingup.com and am having issues with the alignment on tablet and mobile
Here it is on mobile:
And here it is on tablet
I have tried adding the following CSS in WordPress Customize
#media only screen and (max-width: 767px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float:none;
}
}
But feel I must be missing something. Ideally I just want the text to be below the image on mobile and tablet.
Thanks in advance.
The custom CSS code you added for desktop mode is affecting the elements on smaller devices and you need to override it:
Most likely, adding this to your CSS will help:
.list-category li {
display: flex;
}
#media(max-width: 767px) {
.list-category li {
flex-direction: column;
}
.list-category li > a {
margin: 0 auto;
}
.list-category li .custom-content {
width: auto;
margin: 20px;
padding-left: 0;
}
}
If you don't want the images centered, remove the margin:0 auto rule.
I'm having trouble getting this guitar I have built with CSS to be responsive. I would like the body of the guitar and the neck to remain static and just get cut off as the screen resizes. However I am unsure how to do this as I am using flexbox to lay it out. If anyone has any suggestions I would greatly appreciate it.
CodePen Link
/*I was required to post this code please see the link above*/
body {
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.guitar {
margin-top: 1px;
border: 2px solid #3A434A;
background-color: #EDEDEE;
height: 300px;
width: 90%;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
Well, there's no huge differences about using flexbox or not to create responsive things. So you just need to write appropriate rules for mobile view. It's possible to do with #media
#media screen and (max-width: 768px) { /* your code for mobile here */ }
It's not clear to me about what actually you trying to achieve for mobile view. It would be nice if you could provide a screenshot or so that will represent what's on your mind ;)
Here is my site:
http://www.gregorydanelian.comule.com/ken
I want thumbnail gallery to be centred at all times but I am having trouble doing this.
I know I can use
text-align: center;
On the parent element and then set the thumbnails like so:
display: inline-block;
However nothing is working, the thumbnails always float left.
I have tried adding media queries to force the margin from left (for example):
#media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;
}
}
But there must be an easier way to just get the ul to centre no matter what the width is.
How can I centre the thumbnail gallery on all browser widths?
Add these changes and remove those left-margins you set !important on ul
.thumbnails > li {
display: inline-block;
float: none;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnails {
margin: 0 auto;
text-align: center;
width: 100%;
}
Important: Add this to end of your css/mystyles.css file.
Add this CSS media query
#media (min-width: 1200px)
.thumbnails {
max-width:1200px
}
you may have to adjust media queries for multiple screens.
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.