Jump to content

Archived

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

mtaus

MediaBox Mobile Responsiveness

Recommended Posts

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 [email protected]@ 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

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


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

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

Share this post


Link to post
Share on other sites
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
×