Jump to content

Archived

This topic is now archived and is closed to further replies.

mtaus

MediaBox Mobile Responsiveness

Recommended Posts

mtaus+    5
mtaus

I'm using a MediaBox to layout some text in the top section of this page: http://blog.abodo.com/apartment-search-app/

 

Normally, I would use a Masthead section for this type of layout, but the design requires a left aligned text section, which was a pain in the a@@ to achieve in Masthead (a feature would be nice).

 

So I used a MediaBox instead. It looks great on a desktop and tablet, but on smaller screens (e.g., iPhone) the text does not reduce properly. Screenshot here.

 

My MediaBox configuration includes an H1 tag section in the Title and a mix of H3 +  p tagged content in the Text section... looks like this.

 

Any ideas on how I can ensure this text will reduce correctly on smaller screens?

 

Thanks for any help.

 

Wordpress 3.9.1

PageLines v1.1.8

 

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Instead of defining the H1, H3 sizes, try using percentages.. I found 450% worked well for h1 and somewhere between 250-300% for h3

  • Like 1

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
mtaus+    5
mtaus

GetMeWebDesign that worked like a charm w/ h1 at 400%... thanks!

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

No problem... glad it worked for you


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

  • Similar Content

    • triggerfish
      By triggerfish+
      Media Box not taking Google Maps input
      I have the EMBED MAP code from Google (which I have done 100''s of times before),
      I input it into the TEXTBOX or MEDIABOX SAVE it, and as soon as I refresh the page the text is gone (and of course there is no map).
      I have rebooted, refresh cache, everything with no luck..it just will not take the google maps input...it will however take and save a simple text input.
      I am using WordPress 4.5.1
      DMSVersion: 2.2.1.1
      The google code is:
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.466376170749!2d-123.11645494869879!3d49.286507879230314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548671828dbf1c61%3A0x489cbb919c49d6e!2s325+Howe+St%2C+Vancouver%2C+BC+V6C+3N2!5e0!3m2!1sen!2sca!4v1461869255884" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
      The website and CONTACT PAGE ( the map is next to the CONTACT VALRI text, there is a textbox and media box there) are here:
      http://valufitness.com/contact-us/
      Your login is:
      http://valufitness.com/val-login/
      USer= ***
      pass= ****
       
    • amb62137
      By amb62137
      Hi there,
      I am trying to change an image on hover using either MediaBox or TextBox. The image is manually inserted using the HTML box. 
    • pagelines_45
      By pagelines_45
      I am trying to remove the bottom padding from a media box.  When I inspect and change the value it works but I can not for the right css section names to change it in either the page css or custom code area.  I have even tried custom style for the page, but no luck.  Here is the site http://wordpress.howard-boats.com/  on the home page I am trying to get the wide sailboat image to touch the foot.  bottom-padding:0px  but I cant get it to work.  Thank you for your help I'm sure I am doing something stupid.
       
      David
       
    • mundocaco
      By mundocaco+
      Hello, inexplicably few signs have appeared at the beginning of each excerpts, removing the option these signs disappear, but appear when I activate it again. You know why happen this?.
       
      Yo can see online here: http://www.latitudestudio.eu/press-news/ 
       
       
    • dherries
      By dherries
      I am trying to add a widgetizer to my page/post and the system does not let it drag. The system creates  large Widgetizer logo and nothing will happen. What am I doing wrong?  I am using DSM 1.1.9.  Website is www.moveincache.com
×