- This topic has 11 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
hi, i wanted to ask you about the bad padding-margin in the mobile version. Icon and menu hamburger alignement is weird too…
How can i make it good please 🙂
See attachment.
Hi @jv,
I hope you are well today and thank you for your question.
Could you please point out the padding / margin issue in the shared screenshots by arrows and share me your site URL where it is happening so that I can help you?
Best regards,
Shufflehound teamhere’s the screenshots with specs 🙂
I have tested it on mobile but didn’t get that issue as shown in the attached screenshot.
Could you please tell me on which mobile device you are testing it and which browser you are using?
Also please try testing it on different browser.
i’m on iphone SE iOS 11.4.1, chrome and safari
You can try resolving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.blog-style-mini1 article { margin-left: 0; margin-right: -2px; }Thank for the code, but it doesnt work… its work for 2px for the posts content (but still non-centered) margin but doesnt work at all for the margin of header, widget and footer. I even check on landscape position to get wider screen but still have the same awkward alignment… 🙁
i also note that your code is for article but in fact the article are fine – non-centered, but the header-widget-footer are reaaaally narrower than article.
i checked on my side and play a little bit with the debbug console and found that it could be link with this
<div class=”styles-section matched-styles monospace navigable” tabindex=”-1″ role=”treeitem”>
<div class=”styles-section-title styles-selector”>
<div class=”media-list media-matches”>
<div class=”media editable-media”>@media <span class=”media-text”>(max-width: 320px)</span></div>
</div>
<div><span class=”selector”><span class=”simple-selector selector-matches”>.container</span></span> {</div>
<div><span class=”webkit-css-property”>width</span>: <span class=”value”>280px</span>;</div>
<div><span class=”webkit-css-property”>min-width</span>: <span class=”value”>280px</span>;</div>
<div><span class=”webkit-css-property”>max-width</span>: <span class=”value”>280px</span>;</div>
</div>
<div class=”sidebar-pane-closing-brace”>}
<div class=”sidebar-pane-section-toolbar toolbar” aria-hidden=”true”>
<div class=”toolbar-shadow”></div>
</div>
</div>
</div>
<div class=”styles-section matched-styles monospace navigable” tabindex=”-1″ role=”treeitem”>
<div class=”styles-section-title styles-selector”>
<div class=”media-list media-matches”>
<div class=”media editable-media”>@media <span class=”media-text”>(max-width: 1250px)</span></div>
</div>
<div><span class=”selector”><span class=”simple-selector selector-matches”>.container</span></span> {</div>
<div><span class=”webkit-css-property”>max-width</span>: <span class=”value”>100%!important</span>;</div>
<div><span class=”webkit-css-property”>min-width</span>: <span class=”value”>100%</span>;</div>
<div><span class=”webkit-css-property”>padding-left</span>: <span class=”value”>30px!important</span>;</div>
<div><span class=”webkit-css-property”>padding-right</span>: <span class=”value”>30px!important</span>;</div>
</div>
<div class=”sidebar-pane-closing-brace”>}
<div class=”sidebar-pane-section-toolbar toolbar” aria-hidden=”true”>
<div class=”toolbar-shadow”></div>
</div>
</div>
</div>
<div class=”styles-section matched-styles monospace navigable” tabindex=”-1″ role=”treeitem”>
<div class=”styles-section-title styles-selector”>
<div class=”styles-section-subtitle”></div>
<div><span class=”selector”><span class=”simple-selector selector-matches”>.container</span></span> {</div>
<div><span class=”webkit-css-property”>padding-left</span>: <span class=”value”>0!important</span>;</div>
</div>
<div class=”style-properties matched-styles monospace”>
<div class=”tree-outline-disclosure”><span class=”webkit-css-property”>padding-right</span>: <span class=”value”>0!important</span>;
</div>
</div>
<div class=”sidebar-pane-closing-brace”>}
<div class=”sidebar-pane-section-toolbar toolbar” aria-hidden=”true”>
<div class=”toolbar-shadow”></div>
</div>
</div>
</div>
<div class=”styles-section matched-styles monospace navigable” tabindex=”-1″ role=”treeitem”>
<div class=”styles-section-title styles-selector”>
<div><span class=”selector”><span class=”simple-selector selector-matches”>.container</span></span> {</div>
</div>
<div class=”style-properties matched-styles monospace”>
<div class=”tree-outline-disclosure”><span class=”webkit-css-property”>padding-right</span>: <span class=”value”>15px</span>;
<span class=”webkit-css-property”>padding-left</span>: <span class=”value”>15px</span>;
<span class=”webkit-css-property”>margin-right</span>: <span class=”value”>auto</span>;
<span class=”webkit-css-property”>margin-left</span>: <span class=”value”>auto</span>;
</div>
</div>
<div class=”sidebar-pane-closing-brace”>}</div>
</div>
<div></div>
<div></div>
<div>but i cant figure it out exactly… when i play check/uncheck with margin-padding stuff it make look header-widget-footer OK, but it also make post content wider which is not OK because post content is ok right now and i just want to have the same width all along the page.</div>
<div></div>
<div>hope its help 🙂 thank you.</div>i checked on my side and play a little bit with the debbug console and found that it could be link with this
@media (max-width: 320px) .container { width: 280px; min-width: 280px; max-width: 280px; } @media (max-width: 1250px) .container { max-width: 100%!important; min-width: 100%; padding-left: 30px!important; padding-right: 30px!important; } .container { padding-left: 0!important; padding-right: 0!important; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }but i cant figure it out exactly… when i play check/uncheck with margin-padding stuff it make look header-widget-footer OK, but it also make post content wider which is not OK because post content is ok right now and i just want to have the same width all along the page.
hope its help 🙂 thank you.
PS : my previous post was messy ! sorry
You can try fixing it using YellowPencil editor in the responsive mode as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Solution for this topic
i found it ! so you have to add function in the child theme to get responsive.css an change the css for : (280px to 320px)
@media (max-width: 320px) .container { width: 320px; min-width: 320px; max-width: 320px; }et voilà ! its look good on iphone 5/SE 🙂
Awesome great to see you got that resolved.
Please advise if you have more questions.
Have a fantastic day!
