Responsive theme is inconsistent v.8.0.3
Permalink
I am using a responsive theme. For the most part, it works beautifully. However, there is a heading on the home page that does not resize on a smaller screen, either on a desktop or a mobile platform. I have included code from the page source, the first section does not resize, the second section does. The coding is appears to be almost the same. I cannot identify why this is happening. There is no specification as to the width. From what I understand about responsive themes, if I used something other than a percentage, that would cause this issue. I don't think I've done that.
I have spent hours on this issue and am so frustrated that I have decided to ask for help. I have searched the forums and didn't find this exact issue. I didn't go to the theme developer as I don't think the theme is the problem. I think it is user error. If I need to post there instead, please let me know.
Page Source (I have substituted placeholder text, everything else is the same as the site)
This text is not responsive
[<div class="container"><div class="row"><div class="col-sm-12"> <div class="ccm-custom-style-container ccm-custom-style-main-359 heading-centering"
>
<div class="heading-types">
<h1 class="double-line"><span>Vollictore, comniaeri ulparum sum eatiatiis sum</span></h1>
</div>
</div></div></div> </div>]
This text is responsive.
[<div class="container"><div class="row"><div class="col-sm-12"> <div class="ccm-custom-style-container ccm-custom-style-main-360">
<p>Ectur rerchit untibus repeles poruptium nam sundiciam fugias ni bea de parisci volore cuptate ctemoloria ipsunt omnit faccae nihicias doluptatasit venti occupid ucipid excerna turias arum veritatios dissinvent facerupta corestium audant.<o:p></o:p></p>
</div></div></div> </div>]
The URL is suzetted.com. I am running version 8.0.3. The theme is Stucco. The browser is Firefox.
I have spent hours on this issue and am so frustrated that I have decided to ask for help. I have searched the forums and didn't find this exact issue. I didn't go to the theme developer as I don't think the theme is the problem. I think it is user error. If I need to post there instead, please let me know.
Page Source (I have substituted placeholder text, everything else is the same as the site)
This text is not responsive
[<div class="container"><div class="row"><div class="col-sm-12"> <div class="ccm-custom-style-container ccm-custom-style-main-359 heading-centering"
>
<div class="heading-types">
<h1 class="double-line"><span>Vollictore, comniaeri ulparum sum eatiatiis sum</span></h1>
</div>
</div></div></div> </div>]
This text is responsive.
[<div class="container"><div class="row"><div class="col-sm-12"> <div class="ccm-custom-style-container ccm-custom-style-main-360">
<p>Ectur rerchit untibus repeles poruptium nam sundiciam fugias ni bea de parisci volore cuptate ctemoloria ipsunt omnit faccae nihicias doluptatasit venti occupid ucipid excerna turias arum veritatios dissinvent facerupta corestium audant.<o:p></o:p></p>
</div></div></div> </div>]
The URL is suzetted.com. I am running version 8.0.3. The theme is Stucco. The browser is Firefox.
First your text "life is meant to be enjoyed not endured" is part of the image "not live" text (so the text could not be responsive)
Second, the bug is with the "life is meant to be..." slider. I think the best way is to delete this "theme slider" and use Concrete5 slider (Or another custom template) - because I am sure you add some extra CSS and/or change the order of the blocks (on mobile the slider is on top of the nav).
In other words, you change the theme core layout (In the demo on a desktop the slider is first - and on a mobile second) - in your site on the desktop the slider is second). If you don't need this trick and don't know well CSS maybe is better to use the core block (without media Q and absolute positions),
You put the slider inside this div "global-navi" (this div is for some nav items with absolute position on mobile)
Look at absolute positions in your code (they change the dom order)