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.
Related
I have a problem with width and height of images on the smartphone. I use this code. But I don't know why on the smartphone it also uses the same height of 13em like on desktop screen. All other amartphone definitions work fine.
#media only screen and (max-device-width: 60em) {
/* STYLES HERE for DEVICES with physical max-screen width of 60em */
article img {
float: left;
margin-right: 0.2em;
width: 100%;
height: auto;
}
}
article img {
float: left;
margin-right: 0.2em;
height: 13em;
}
Try putting the media query under the article img.
Not related but you don't need to repeat float and margin-right since you're not overriding them.
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
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.
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.