I have a problem with a theme in drupal. The documentation says it is responsive but when I check it on a mobile, although it resizes everything, it also creates an empty space on the right side of the page. I really don't understand why.
http://nexus.techsaran.com/ This is a link for the demo of the theme when you use the emulator in chrome to see it like if you were on a mobile it creates the empty space and it also does it when you check the link directly from your phone
Thanks
This caused by your adsense div.
Try to generate responsive ads from your adsense account or add this code to your css :
.adsense {
width: 100% !important;
}
Related
as Im making my new React Web App, I noticed when open on an Iphone, if the user drags horizontally it renders some blank space and makes the website functionality awfull, for androids though, this doesnt happen, do you guys have any hints?
My website URL-
https://werepairsuporte.com.pt/
PS- I dont have a SSL certificate yet as my website is not fully ready, hope you can understand that.
The problem is that one of your elements is wider than the viewport of the iphone, using the console delete elements one by one til you find the offending one then use breakpoints to amend the width.
either to just add this to your css.
body {
overflow-x: none
}
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.