Raindrops. Viewport size issue

Hi atvtours

Thank you for pointing out the problem

Dashboard / Appearance / Customize

Advanced / Site-wide CSS

Please add below style.rules

@media screen and (max-width : 640px){

    .blog .sticky, .home .sticky {
        box-sizing:border-box;
        width:90%;
    }
    .grid-pinup-item{
        position:relative;
    }
    .safari .entry-content ol,
    .safari .entry-content ul{
        min-width:0;
    }
}

Save and Publish.

Mobile friendly test say OK.

If you can add this code you get an error

If possible, I want you to give the URL of your site

This issue will fixed next version of Raindrops.

Thank you.

Thank you very much for the response.

I believe your patch code has worked, I will report back in a few days.

However I have 2 more questions.

1) on a mobile device, the main page does something that is incorrect or I don’t understand. Please look at this photo.
https://www.atv-tours.net/images/mobile.jpg
The page will oddly scroll sideways, but only one way. And when it does, its leaves the grey band as shown in the photo. What is this? Is this a coding issue or space I am to somehow populate with data?

2) You mention updates to the theme. Is it possible to update a site once it has been configured with much content added. I see some other themes destroy data and often don’t work. The reason I ask is I am strong considering changing my main site over to rain drops. I am in test mode now with this theme.

Again, Thank you very much.

Mike

Sorry, the error came back regarding the view port size.
Google Says,

The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.

The page content is 464 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport:The element Skip to RAINDR…ENTRY_WIDGET-2 falls outside the viewport.
The element Skip to RAINDR…CHIVE_WIDGET-2 falls outside the viewport.
The element Skip to RAINDR…ENTRY_WIDGET-3 falls outside the viewport.

<a href="#raindrops_pin…entry_widget-2" class="screen-reader-text">Skip to RAINDR…ENTRY_WIDGET-2</a> falls outside the viewport.
The element <a href="#raindrops_ext…chive_widget-2" class="screen-reader-text">Skip to RAINDR…CHIVE_WIDGET-2</a> falls outside the viewport.
The element <a href="#raindrops_pin…entry_widget-3" class="screen-reader-text">Skip to RAINDR…ENTRY_WIDGET-3</a> falls outside the viewport.

The banner at the top is 1280 x 387 and the slider images where also sized to recommended size.

Thanks

I Think the error is in the top banner sizing.

https://www.ediblewild.net/

A modified candidate version for the next version, you have to test to reproduce your environment.

What problems has confirmed what has occurred in your presentation to the access to the URL in the screenshot site.

The new candidate version contains some changes that you to have not yet been reported.

Among them, it is less than the seems to be important.

Behind the line874 line of}, you need to add one}.

This is the result of mobile friendly test is, we believe that factors that become unstable.
Google Translate for Business:Translator ToolkitWebsite TranslatorGlobal Market Finder
About Google TranslateCommunityMobileAbout GooglePrivacy & TermsHelpSend feedback
Click to edit and see alternate translations

@see
https://github.com/tenman/raindrops/blob/master/responsiveness.css#L874

The new version, will be live in a few days.

2) You mention updates to the theme. Is it possible to update a site once it has been configured with much content added. I see some other themes destroy data and often don’t work. The reason I ask is I am strong considering changing my main site over to rain drops. I am in test mode now with this theme.

All theme is not perfect.

Raindrops theme, went 298 times updates in the six years from development.

almost weekly update.

It is All, and stable operation, because of that can be corrected even if trouble occurs system.

that is willing to play an important role, is the user’s pointed out

I, theme as long as there is a problem I believe that we should continue to update.

It is for me, is a selection with the hardship.

If possible try next versions Raindrops.

I Think the error is in the top banner sizing.

Is header image or slider image?

The header image. If I remove the header, the problem seems to go away.

Nobita,

First off, thank you very much for the help. It is greatly appreciated.

However I am unsure what you are requesting that I do at line 874.

Here is the code from my responsive file

}
@media screen and (max-width : 480px){
    html .gecko{
        max-width:98.4%;
        margin:0;
        padding:0;
    }
}

IS there something you wish I add? Or should I just wait for the next version that you plan to publish in the next few days.

Best Regards.

https://github.com/tenman/raindrops/blob/master/responsiveness.css#L42-L874

hilighting style rules must wrapping like below

@media screen and (max-width : 640px){

  hilight codes...

}/* Nothing close tag */

Media queries – due to the lack of end tags, style sheet will not be interpreted in the browser normally

Since the new Raindrops to update today, It maybe live to today.

Please wait for it

Ok we will wait for the new version. However we added the bracket like this;

}
    .rd-cat-em .rsidebar .cat-item:before,
    .rd-cat-em .lsidebar .cat-item:before{
       vertical-align:middle;
    }
}
@media screen and (max-width : 480px){
    html .gecko{
        max-width:98.4%;
        margin:0;
        padding:0;
    }
}

Unfortunately closing it off didn’t fix the error. Must be something else going on.

This is I nice theme. I will wait as per your advice.

Thank you very much ??

Looks like another bug shows up in windows explorer

https://www.atv-tours.net/images/rpt.JPG

Note the red circle.

This shows up with Microsoft Explorer but not the Microsoft Edge Browser.

Now, Raindrops1.416 has been live.

Please update it.

Please check whether the red circle issue changes.

Of course, mobile friendly test also please do

mobile friendly test was resolved for me

Checked sigle site, multi site, child theme all good for me.

Testing 3 website.

red circle issue is, there are some questions.

https://www.tenman.info/wp3/manualraindrops/files/meta-slider-section.gif

Dashboard / Appearance / Customize

Add-ons

1 is (red border) section exist? or not

Dashboard / Metaslider

2 using flex slider or other

3 Please tell me the details of the Advanced Settings

Tenman,

The viewport problem is still on my sites and yours.

Test Here > https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tenman.info%2Fwp3%2Fraindrops%2F

And Here >
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tenman.info%2Fwp3%2Fpreviewraindrops%2F

This is your sites test…
https://www.atv-tours.net/images/viewport.JPG

—

Yes in the addon section the are you point out is there.

—-

Yes flex slider.

Settings are as follows https://www.atv-tours.net/images/setting.jpg

However I just noticed that the basic settings for the flex slider are not changeable for some reason. Cannot change the effect or theme etc..

https://www.tenman.info/wp3/raindrops

yes Site has ploblem ( It has been fixed ?? )

Where the problem is occurring, but is the visible portion of the RSS widget, it is the part that is not included in the distribution theme only in this site.

Mobile friendly test I’m using below

https://www.google.com/webmasters/tools/mobile-friendly/

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tenman.info%2Fwp3%2Fpreviewraindrops%2F

above issue

The problems have been pointed out, it is the part of this page.

Are doing on this page, the special called rd-list-type-tree, has happened in part to display a list in the directory list format.

If, by using you actually this class, because if a problem occurs corresponding, please consider separately from the time of issue.

https://www.tenman.info/wp3/previewraindrops/2016/01/08/example-post-float-image-and-list-raindrops1-345/

I feel test tools better

Search Console
https://www.google.com/webmasters/tools/mobile-usability

or

https://www.google.com/webmasters/tools/mobile-friendly/

About Slider

My Site result below

https://www.tenman.info/wp3/manualraindrops/files/meta-slider-screenshot.jpg

reason of Difference

My site load plugins style

<link rel='stylesheet' id='metaslider-flex-slider-css'  href='https://www.example.com/wp/wp-content/plugins/ml-slider/assets/sliders/flexslider/flexslider.css?ver=3.3.7' type='text/css' media='all' property='stylesheet' />
<link rel='stylesheet' id='metaslider-public-css'  href='https://www.example.com/wp/wp-content/plugins/ml-slider/assets/metaslider/public.css?ver=3.3.7' type='text/css' media='all' property='stylesheet' />

but I can not find your W3 Total Cache cached source.