I have a website it has banner responsiveness issue on smaller devices. Also logo pulls towards right as well.
Website link.
#rev_slider_1_1949_wrapper
{
position: fixed;
z-index: 0;
max-width: 1200px !important
}
please do help me fix this bug. thanks in advance
Try giving your .container_24 element a width: 100% in the respective stylesheet (720.css).
Related
EDIT: solved! Check the comments, cheers Dev!
On my website's homepage I want to insert a background image that fits the full screen width. I'm using WordPress and Elementor to do this.
I've tried many setups but I'm unable to fill the full screen width, while keeping the correct image height so the ratios stay correct.
A part of the right side of the image was cut off.
Code I used:
<div id="kunstplein1920"></div>
#kunstplein1920 {
background: url(imageURLhere);
background-repeat: no-repeat center fixed;
background-size: cover;
min-width: 1920px;
min-height: 603px;}
Any help is appreciated! Thanks. :)
Cheers,
Joris
Did you try adding
width: 100%?
should be working
Why is there an empty white space on the right side of my mobile website display? like this my error screeenshot here and this is my live link
I beg for your help and thank you :)
You have issue in awan.png image. This image is absolute position for Mobile and Desktop. In smaller screen this image showing in outside of .top-container. You have two option to fix this issue.
Option 1
Using #media for mobile devices. You no need to use this cloud image for mobile devices.
#media (max-width: 767px){
.bottom-cloud{
display: none;
}
}
Option 2
Make top-container class overflow hidden.
.top-container{
position: relative;
padding-top: 100px;
background-color: var(--biru-muda);
overflow: hidden;
}
Hope this help!.
its your .bottom-cloud in the top-container what causes the issue.
<img class="bottom-cloud" src="img/awan.png" alt="">
it has a position:absolute with position out of the viewport which causes the viewport expanding.
Add an overflow:hidden to the top-container and it wont expand it.
"overflow-x: hidden !important;" was causing an issue where the browsers side bar was getting cut off (overlapped). Removing this fixed that error, however, one and only one of the pages Header is running off the screen when viewing in mobile. Here is the code, changing the position from fixed to absolute fixes the issue but i need the header to be fixed. In Desktop view, everything is fine. only in mobile and only on one page. Its strange. Here is the code responsible for the size of the screen i am having issues with.
#media screen and (min-width: 321px) and (max-width: 759px){
.navbar-mj{
position: fixed;
width: 100%;
top: 0px;
z-index: 89;
background-color:#6782af;
margin-bottom: 0;
}
}
It's a little difficult to tell what your issue is without seeing a more complete example but what if you remove the width: 100% and then add right: 0 and left: 0?
try lower the (max-width: 500px);
it may help you instead of overflow the screen of the mobile view.
thanks
The URL in question is http://remote.demowebsiteaddress.com
The large header image does not automatically resize itself for larger screens on desktop. I am using Divi theme for Wordpress..
Any help?
Add can create responsive images that go across the entire screen by adding thewidth CSS property. Make sure your body tag has a margin & padding of 0 as well.
example:
body{
margin: 0;
padding: 0;
}
img{
width: 100%;
}
CODEPEN EXAMPLE
I have a section in the header on the right side that scales down fine with the exception of how the right block of images are moving. The images resize just fine, but once I begin to scale down, They push into the logo div and then are placed above it.
How can I position them to place under the logo and line up accordingly while staying in the header and without just turning the display to none when I reach a certain screen size?
Here is a link for the jsbin of those images/badges. The live site is in Wordpress and the code is too much to post. Maybe if you just use Firebug or the dev tools.
This is the live version of the site.
Also as a sidenote: I have the -190px margin enabled on the live site.
Here is a screenshot just for reference:
I managed to fix the issue. I added a separate media query like so:
#media screen and (max-width: 479px) {
.badges-container {
position: relative;
text-align: center;
margin-top: 0px
}
.badges img {
width: 19%;
}