I was supposed to correct the issue with responsivesness on mobile for this site. At this point I need help to figure out why this website behaves like this on a mobile view. I cannot figure out why there is horizontal scrolling the landing page.
Its due to the social icons Css
Just paste that in your theme custom style.css
.norm_row {
left: 0 !important;
right: 0 !important;
width: 100% !important;
text-align: center !important;
}
Related
White Space on Wordpress website to the right when switching to rtl in elementor specific pages
Here is webpage :
site url
tried
html, body {
overflow-x: hidden;
}
but not working
Try adding this to your CSS:
.rtl .elementor-top-section {
left: 0 !important;
width: auto !important;
}
My ajax search bar looks central on my mac screen, but on a phone screen, it is way off-center.
Does anyone have a code that can 'float' it center on all screen sizes?
The search bar in question is on www.rebelleforce.com
Thank you
I've tried various different CSS codes that I've found online in other forums - some centralize it on my mobile phone screen, but then I lose the central location on a computer screen.
I see your code to centralize the search bar you use
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 62%;
margin: 0px 250px 0px 250px;
}
try to change "margin" value to margin:autio;
paste this code into style.css file in your theme.
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 75% !important;
margin: 0 auto !important;
}
This code causes the search box to be centered on all screens.
Add this in your css:
#ajaxsearchlite2 {
margin: 0 auto;
}
and if still not working, use the important statement:
#ajaxsearchlite2 {
margin: 0 auto !important;
}
When I load my page, images are displaying correctly, and when I scroll and come back to the images, they appear like this only on mobile :
enter image description here
Use this CSS in which you want media query.
.your_class or img {
width: 100%;
max-width: 100%;
height: auto;
}
I'm attempting to help a friend with her site jessheading.com
She's using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).
The CSS on that box is:
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
}
How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?
Parent of the box:
{
overflow-y: auto
}
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
overflow: hidden;
}
this merely clips overflow, and the rest of the content will be invisible
some other things to consider is to resize the whole orange box as well as the tags with it.
other overflow css you can try are: scroll, auto, etc.
quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.
hope this helps
So I've never styled an iframe before! Obviously you grab it's element name, class or Id and style it like normal however I'm having troubles styling it over the element.style styles that have been placed on it by a wordpress plugin. There's got to be a way to make this iframe a bit more responsive than it is now.
Visit the website here, then scroll to the bottom and hit the "CALCULATE" button under the MORTGAGE CALCULATOR. I'm trying to give this iframe a bit of a responsive touch as it has none right now.
I thought if I just styled it's id name then it would be fine but no luck! Then I tried just iframe.
html #MLCalcFrame {
border: 2px solid red !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
}
html iframe {
width: 100% !important;
border: 2px solid orange;
}
What would the best way be to add some responsive styles to this iframe?