Mobile View Issues

Hey steveorrmedia,
Thank you for your patience and the links, so based on your description for the first three issues, that are all for heading text being cut off at screen sizes below 480px, while it is possible to break the words with a hyphen, I don’t think this will look good so a better option is to reduce the font size for small screens.
The Special Heading element that you are using on these three pages has an option to do this, please go to the styling tab and look for Heading Font Sizes then click the icon for the small device screen and adjust the font size to about 37px.

You could also adjust the Subheading Font Sizes if you wish. I did this for your /message-development/ page special heading, and now the text fits at the smallest screen sizes, please clear your browser cache and check, and then try this for your other pages.
Fot your last issue with the logos being too close together on small mobile when they are in a single column, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 479px) { 
	#top .avia-logo-element-container .slide-entry {
    padding: 10px;
	}
}

and feel free to adjust the 10px to suit if it is not enough
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
For the image that overlaps the text at the bottom of your page, I added a little padding between the text and image:

fell free to adjust if you want more space.
Your other page was much harder because of the column structure, I added this css:

@media only screen and (min-width: 768px) and (max-width: 1280px) { 
	.podcast-image,
	.avia-image-container.avia-align-center.podcast-image {
		margin-top: 20px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1160px) { 
	.podcast-image,
	.avia-image-container.avia-align-center.podcast-image {
		margin-top: 50px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 989px) { 
	.responsive #top.page-id-1313 .av_one_half.first + .av_one_fourth + .av_one_fourth.flex_column_div{
		width: 20%;
		position: absolute;
        right: 0;
        top: -50px;
	}
	.podcast-image, .avia-image-container.avia-align-center.podcast-image {
    margin-top: -50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 989px){
.responsive .av_one_half.avia-builder-el-14.first.el_before_av_one_fourth.flex_column_div {
	width: 72%;
}
}
@media only screen and (max-width: 767px) { 
	#top.page-id-1313 #av_section_3 .template-page.content {
		padding-bottom: 0 !important;
	}
	#top.page-id-1313 #av_section_4 .template-page.content {
		padding-top: 0 !important;
	}
}

and I made some extra elements on the page to show at the mobile size, in my test it seems to be working, please clear your browser cache and check.
for tablet before the mobile break you will see that the right side “sidebar” items look like that are in a sidebar, Please see the screenshot in the Private Content area.
and then at mobile they become full width and are under each other, Please see the screenshot in the Private Content area.
If you don’t see it this way try clearing your cache a few times.

Best regards,
Mike

Hi,
Thanks for the feedback, I understand about the articles in the “fake sidebar” being split by the podcasting aircheck image, this is because the first article is in a different color section before the color section that the podcasting aircheck image is in.
To properly correct this I would recommend placing the three “fake sidebar” articles in real sidebar widgets and showing the sidebar on that page and delete the hidden elements I added. this will work much better. Please give this a try and if you get stuck we are happy to help.

Best regards,
Mike

Hi,
Sure, so first I copyied your page and created a test page to demonstrate /podcasting-test/ Then I enabled the right sidebar on the test page:

The screenshots will be from the Classic Editor, as I prefer it over the Block Editor. Then I created the three sidebar widgets to replace your “fake sidebar”

WordPress ▸ Appearance ▸ Widgets ▸ Sidebar Pages

Then in the backend I removed the sections not needed, and added a little css to remove the sidebar border:

#top #main .sidebar.sidebar_right {
	border: none;
}
#top .container_wrap.sidebar_right .template-page.content {
	border-right: none;
}

and added a little css so the sidebar will show on mobile centered:

@media only screen and (max-width: 767px) { 
	.responsive #top #main .sidebar {
		display: block;
		width: 100%;
		padding-top: 0;
	}
	.responsive #top #main .sidebar .inner_sidebar {
		margin: 0;
	}
	.responsive #top #main .sidebar .inner_sidebar .avia_textblock * {
		text-align: center !important;

	}
	#top .container_wrap.sidebar_right .template-page.content {
		padding-bottom: 0;
	}
}

Now if you compare the original /podcasting/ with the new /podcasting-test/ I don’t think you can tell the difference, except on mobile the sidebar is under the Podcast “Aircheck” and if you want to add this sidebar to other pages it will be easy.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to help, so on the /podcasting-test/ page you are not seeing Steve’s Podcasting Articles under the Podcast “Aircheck” like this?

I see this in chrome dev tools emulating a mobile device and in my Android mobile.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
What device are you using? Perhaps try disabling your maintenance mode and check again.
I added the css to your WordPress ▸ Customize ▸ Additional CSS perhaps this will help your device.

Best regards,
Mike

Hi,
1: I adjusted this css from 50% to 55% and it seems better, if you want more space try 60%

2: I added this css:

.main_color .sidebar p {
	color: #000;
}

3: I view the podcasting test page on my Android and with Chrome Dev Tools, please see this article, is this what you mean?

Best regards,
Mike

Hi,
Oh I see, the test page that I created should look good for all devices, desktop & mobile, please review the page and if you agree then you can trash your original page and rename the test page to use it. If you find something that you don’t like about the test page on desktop please let us know so we can help, but I don’t see a major difference between the two on desktop. I only see some very minor padding and spacing differences when I have the two in different tabs and switch back and forth, hopefully this minor spacing is not troublesome for you.

Best regards,
Mike

Hi,
To bring the articles in the sidebar closer together, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.sidebar .widget {
    padding: 30px 0 0 0;
}

There is a way to ensure that the page URL becomes /podcasting/ when you are ready to delete the old page and switch to using the test page, I will do it for you when you are ready.
Please check if the above css helps and you are happy with the test page on desktop & mobile, and let us know if you want any more adjustments.

Best regards,
Mike

Hi,
To add a little space between the widget title and the image try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.sidebar .custom-html-widget h3 {
	margin-bottom: 20px;
}

Feel free to adjust to suit and check on desttop and mobile, and if it all looks good let me know and I will delete the current /podcasting/ page and change the /podcasting-test/ page to replace it.

Best regards,
Mike

Hi,
OK, I deleted your original page and then emptied the trash so the new page could have the same slug (URL) and then I used the “Quick Edit” open to change the title and slug:

Then I re-added the page to your menu under services, I believe in the right place, please check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike