Forum Support

Shape 5
April 11, 2021, 09:50:18 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Text misaligned next to article image on mobile device.  (Read 658 times)
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« on: March 14, 2018, 12:19:59 AM »

Hi there,

I thought I posted this a few days ago, but I cannot find the original post. Please see attached images.

How would I go about fixing this? On the desktop browser, the alignment is fine. On a mobile device, I would expect the text to drop down under the picture.

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: March 14, 2018, 11:35:48 AM »

Hello,

Please post a URL to this page and I can help you adjust the CSS.

Thanks
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #2 on: March 14, 2018, 06:02:19 PM »

http://www.givelight.org/news/2018/280-let-s-get-this-done.html

You would need to look at it on a mobile device to replicate the problem.

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: March 15, 2018, 01:01:43 PM »

Please try adding the following to the bottom of your custom.css file:

Code:
@media screen and (max-width: 455px){
img.leftside {float:none;width:100%;text-align:center;}
}
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #4 on: March 17, 2018, 10:16:50 AM »

Thanks!

That worked. I added something similar for the right side:

@media screen and (max-width: 455px){
    img.rightside {float:right;width:100%;text-align:center;}
   img.leftside {float:none;width:100%;text-align:center;}
}
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.