Forum Replies Created
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 🙂
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
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>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’m on iphone SE iOS 11.4.1, chrome and safari
here’s the screenshots with specs 🙂
i think you mixed-up your reply ! haha.
this was about my previous post…
so what about this one ?
thank you 🙂
THANK YOU 🙂
