-
Posts
-
Hello,
I am just running some responsive tests and all looks perfect on iPhone – but on Ipad view – nothing has correlated.
Pls see screen grabs in Dropbox folder https://www.dropbox.com/sh/71v1vt2rsvkpr4v/AADWWlc8PnIgf4_L-VSC17Jma?dl=0*WordPress 4.8.3 running Enfold Child theme.
Can you pls advise how I can correct this.
Client looking to have website up and running this week so hoping you can provide some urgent support. :)
Thank you!
i guess sometimes you have to think about what you like to obtain f.e.
the second screenshot – this is a very special construct of you.
i would have done it not with a grid. Grid ALB is for having the whole width some content. Than you making an extra big padding on the left side to have the image right side in that grid cell. Etc
concerning to your text : you can use the heading element with breaks just inserting where you want a break an</br>so your heading line in heading alb looks this way:
Partnering with clients</br>to create meaningful</br>content that resonates and</br>brings your work to life.
but even on headings i would not do this. Give the responsiveness a chance to break lines.
On pure text block elements with a lot of text i only structured the layout via paragraph. in a paragraph itself it is very rare to have that breaks.
By the way if you don’t like the way often wordpress sets the breaks you can use plugins like hyphenator, which even could help to have much prettier word-breaks. ( see text block in justify mode)i would have done that by 1/2 1/2 containers – left side the image right side your text.
click to enlarge:
And to have it a bit more tricky – on smaller screens (less 990px ) your headline moves (virtually) to top.
This could be achieved by setting display option by media query.
Enfold 4.2 got this embeded feature to set on some resolutions in the alb element itself
you see the layout above – i doubled your text in a 1/1 box and set it to display:none on large screens
on the text right hand besides the image – i did it vice versa – as you see in the 2nd screenshot.see result here: https://webers-testseite.de/elegant/kelsey/
If you don’t like to install new 4.2 this could be done via custom classes and media query
on nearly all other screenshots of your installation : if you don’t want full width layout – do not use grid alb element.
The reason why the right content goes over your left one is that you have set the padding in the left grid cell to an absolute value (350px) –
but even if you could have done it with relative values ( in percent) – take the column layout .
5th screenshot: your journal page – make a 1/4 and a 3/4 column
4th screenshot: 1/3 columns side by side
6th screenshot: your enquire page: a 1/1 column above with your heading: Let’s work on something
great together.
under it a 1/2 1/2________________________
if you have seen the difference on my site example – i will remove it
Thanks, Gunenni007 – greatly appreciate the level of detail and support. Apologies I missed an alert for your response. I have removed line breaks and grids and all is in working order across all devices.
Thank you.
- You must be logged in to reply to this topic.