Aligning questions

[Madling]

Another thing…

Do you know how I can center the ad above my header? 

[Madling]

Also it seems like all the text and pictures from a mobile view is left centered. 

How can I get the text and picture to fill the whole space?

[scrambler]

This discussion was created from comments split from: Problem with rotate pictures.

[scrambler]

First remove the 20px left margin that you added to the Inject header area.

To center the image the easiest is to give it weaver aligncenter class.
Edit your image tag to look like

<img class=”aligncenter”……../>

Also you added
#branding img {margin-top: -10px;}

I suspect to reduce the space above. That space comes form not hiding the Site Title and tagline. So remove your rule and instead, use MAin options > HEader > Site Title / Tagline > Hide site Title and Hide on phone options

About your alignment question, if you mean you would like the post featured image to be centerd on mobile, you can add the rule below in Advanced Options > Head Section > Cuutom CSS rule box

@media only screen and (max-width:640px) {
#content img.wp-post-image {display:block;float:none;margin-left:auto;margin-right:auto;}
}

If not what you meant, give us a link to the page with more details

[Madling]

This rule moves the pictures to the middle. 

@media only screen and (max-width:640px) {
#content img.wp-post-image {display:block;float:none;margin-left:auto;margin-right:auto;}
}

I want the text and pictures to fill out the whole space/screen.

And then I want the ad above the header to be centered (like the header) 

🙂 

[Madling]

Would it be a bad idea to install a responsive menu plugin to solve the problem?

[scrambler]

I was missing one rule, change my original rule to

@media only screen and (max-width:640px) {
#content img.wp-post-image {display:block;float:none;margin-left:auto;margin-right:auto;max-width:100%;}
}

As for “Would it be a bad idea to install a responsive menu plugin to solve the problem? “

Yes it would be a terrible idea!

Using the browser developer tools, I see a lot of javascfript errors when the site loads!

This appears to prevent the proper execution of weaver scripts that the menu uses, as well as others.

You need to find out what it is, not put a band aid on it. It could be causing a lot more problems on other things (weaver or plugins), that you did not find yet.

If you are afraid of having the site too long without plugins running, we can agree on a time where I will be online and you can deactivate and I can test right away.

I am on the west coat of the US, I normally first have a look at the forum around 10 AM. If that time does not work for you give me a days and times where you could be online and we can agree on one where we can do that. 

[scrambler]

@Madling Are you by any chance hosting with Godaddy, and using their “Managed WordPress” Environment.

Because we have had report of that environment screwing things up, and recently someone reported that it caused his menu to disappear on Mobile…

As soon as he moved away from that environment, problem went away

[Madling]

No I am not hostet by GoDaddy. 

🙂

[Madling]

1. What about picture 2? 🙂 
And then I want the ad above the header to be centered (like the header) 

2. Thank you for the rule.
It did help but there is still more space in the left side of the picture(s)

Before rule

After rule

[scrambler]

http://www.madling.dk/

1) For the Ad, do two things.

Remove the margin-left:20px you put on the #inject_header

Then add an inline CSS to your image tag in that area as below

<img style=”margin:0 auto;”…./>

2) The unequal space on the image comes from the following.

Weaver has a mobile rule that sets the padding on #content to 12px

You added a rule to set that padding on content globally to 5px. For some reason (not 100% sure why), that rule only overrides the left padding, so you end up with 5px on the left and 12px on the right

Add the rule below to override the mobile rule completely

@media only screen and (max-width:640px){
{padding:5px;}
}

[scrambler]

@madling, We just had someone who had a similar Menu disappearing issue on mobile, and it was because he was using  SimplyMinify.

Are you using any Minfying plugin or utility?

[Madling]

I don’t know what SimplyMinify is?

[Madling]

1) I’m sorry could you deepen this?

Then add an inline CSS to your image tag in that area as below

<img style=”margin:0 auto;”…./>

2) This rule didn’t change anything 🙁

@media only screen and (max-width:640px){
{padding:5px;}
}

[Madling]

3) I don’t know why, but the pictures on the front side is suddenly smaller than they use to be. 

If you click at a blog post you can see that the size changes. 

[scrambler]

0- Minifying is an action that compacts css files. Weaver already takes care of that but some people use plugin that attempt to do it again and that can break the CSS. Make sure none of your plugins are doing that, as it could explain why your mobile menu is broken

1- Your Ad is inserted in the SIte header insert code with the html below

<a href=”http://www.partner-ads.com/dk/klikbanner.php?partnerid=16331&bannerid=30248&#8243; target=”_blank” rel=”nofollow”>
<img src=”http://www.partner-ads.com/dk/visbanner.php?partnerid=16331&bannerid=30248&#8243; border=”0″></a>

I was assuming you entered that HTML and if so told you to modify it like below (yellow part)

<

a href=”http://www.partner-ads.com/dk/klikbanner.php?partnerid=16331&bannerid=30248&#8243; target=”_blank” rel=”nofollow”>
<img style=”margin:0 auto;” src=”http://www.partner-ads.com/dk/visbanner.php?partnerid=16331&bannerid=30248&#8243; border=”0″></a>

If you are not inserting the HTML yourself but are using some shortcode, then you can apply that styling by adding the rule below in Advanced Options > Head Section > Custom CSS Rule box instead

#inject_header img {margin:0 auto;}

2) Sorry I missed a piece in the rule, use

@media only screen and (max-width:640px){
#content {padding:5px;}
}

3) I don’t see any difference, your home blog page still has featured images set to large.

Clear your cache, Make sure your settings in Main Options > Post Specifics > Featured image where you select the featured image size for blog page and full posts have not changed.

If you still see an issue, please provide a link to the blog page and to a post that show different featured image size

4- Still lots of javascript errors when your site loads and no mobile menu…

[Author]

Posts