I've been working on this for over an hour so hoping someone can help me figure this out!
I'm trying to get these images centered within mobile view, however, can't seem to get it work.
I've tried a variety of custom css, however, I'm stuck...
#media only screen and (max-width: 900px){
.fusion-column-wrapper {
padding-left: 25px !important;
}}
Here's the page I'm trying to figure it out on.
http://blisspaperboutique.com
You need to set the wrapping anchor tag and img both to display: block. Also, set margin: 0 auto on the img.
#media only screen and (max-width: 900px){
.fusion-column-wrapper a {
display: block;
}
.fusion-column-wrapper a img {
display: block;
margin: 0 auto;
}
}
Related
I am developing website based on Bootstrap template.
Here is link: http://pixelslab.pl/ly/
I just have trouble with paragraphs in the middle - they are overlaping in strange way.
Any idea how to fix it?
screenshot of issue
The fixed height is causing this... change your CSS in the following:
#media screen and (max-width: 766px){
.elementor-text-wrap .section
{
height: auto;
min-height: 200px;
padding-top: inherit
}
}
In order to make them work as expected, you should set your default line-height to normal in a certain breakpoint like 767px. You should also apply flex-direction: column; to the parent element in order to get better results. So the result should be something like this:
#media only screen and (max-width: 767px) {
.elementor-text-wrap .section {
flex-direction: column;
}
.section p {
font-size: 14px;
line-height: normal;
}
}
}
I'm trying to add a banner ad to run along the left side of my blog post.
However my attempts so far have resulted in it appearing above the content pushing the blog post content down the page.
Live link: https://www.moneynest.co.uk/pension-crisis-uk/
Added into head:
<div id=”LeftFloatAds”><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></div>
Added into CSS
#media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{
left: 0px;
position: fixed;
text-align: center;
top: 200px;
}
}
FYI I followed this guide.
First of all, replace the position of ... move it inside your main content wrapper.
Then apply this css,
As you want to show this only on wider screen then use this,
#media only screen and (min-width: 1400px) {
#LeftFloatAds {
position: fixed;
display: block;
overflow: hidden;
left: 0;
top: 200px;
}
}
This will hide the banner on the screen smaller than 1400 pixels.
#media only screen and (max-width: 1399px) {
#LeftFloatAds {
display: none;
}
}
First, be careful with the div id quotes.
<div id=”LeftFloatAds”> should be <div id="LeftFloatAds">
Then, with that media query you are giving those properties to the element only when the screen is at least 1400px but less than 500px, which is impossible. Try it like this:
#media only screen and (min-width: 500px) and (max-width:1400px)
I am making a webpage. I am the first to admit my CSS skills are not the best.
There is blank space appearing to the right side of the mobile version page. (www.perfectshinesmile.com)
Your container is not picking up margin:0 auto in mobile css.
So replace from main.css at line number 2638
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 0;
}
to
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
Hope this will help :)
your .container has set max-width property to 360px. Change it to max-width: none. But I reccomend you to your bootsrap grid for web layout, you would avoid such a problems. I can see in your code that a lot of elements has specific width value, resulting to broken layout on mobile devices.
In your case you have a second scroll bar!
or you do this
::-webkit-scrollbar {display:none !important;}
Or you do this
#media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Don't use the overflow:scroll; ever unless you need it! especially in phones port!
I just finished with creating my site and have been tweaking the mobile views. Now for the life of me I cant figure out why the navbar-brand is disappearing when the site is viewed on mobile chrome or Desktop chrome with a small view port. It does appear in safari on my iPhone, so I'm sure its there. Any help would be appreciated.
Well, you have defined your .navbar-brand img to have a width: auto; in your #media (max-width: 767px) declaration try to remove the width: auto;.
E.g.
#media (max-width: 767px) {
.navbar-brand img {
max-height: 40px;
/* width: auto; */ /** comment out or remove this line **/
margin: -10px 10px 0 0;
}
}
Hope it helps.
I've got
.container {
width: 960px;
margin: 0 auto;
}
.bgcontainer {
width: 960px;
background-image:url(images/midbg.gif);
margin: 0 auto;
}
I need to attach 2 (background)images floating to the container. 2 Wings as you can see in the Image.
They should hide when there is no place like 1024 px.
put the background on your body.
http://codepen.io/anon/pen/fAsHa
You should use a media query. This should solve your problem!
#media screen and (max-width: 1024px) {
.bgcontainer {
background-image:none;
}
}
This will work for multiple styles, just make sure your updated styles are between the media query's {} brackets